GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Remove editor

Browse Source
This commit is contained in:
Tyler Long 2017-09-01 17:35:13 +08:00
parent 89e1da4780
commit a18179e6db
12 changed files with 2 additions and 3879 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.ackrc
View File

@ -1,3 +1,2 @@
--ignore-dir=dist
--ignore-dir=editor
--ignore-file=match:/^yarn\.lock$/

2901
editor/build.js
View File

File diff suppressed because one or more lines are too long

143
editor/css/editor.css
View File

@ -1,143 +0,0 @@
body {
margin: 0;
font-family: 'Open sans', sans-serif;
}
.page {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.header {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
width: 100%;
height: 50px;
background: #282828;
color: #d4d8df;
padding: 10px;
}
.header-logo {
color: #282828;
}
.header-title {
color: #d4d8df;
font-size: 16.25px;
}
.column {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 35%;
height: 100%;
background: #282828;
color: #d4d8df;
max-width: 350px;
overflow-y: scroll;
overflow-x: hidden;
padding: 20px 10px;
margin: 0 20px 0 0;
}
.column h2 {
font-size: 16.25px;
font-weight: bold;
}
.content {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
padding: 0 10px;
}
.editor {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 90%;
height: 40%;
font-family: 'Open sans', sans-serif;
border: 1px solid rgba(40, 40, 40, 0.6);
}
.button {
-webkit-border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 4px;
-moz-background-clip: padding;
border-radius: 4px;
background-clip: padding-box;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 16.25px;
background: #282828;
color: #d4d8df;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
border: 0;
width: 50%;
max-width: 150px;
margin: 5px auto;
}
.group {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 50%;
}
.group:first-of-type {
border-bottom: 1px solid rgba(40, 40, 40, 0.2);
padding: 10px 0;
height: 40%;
}

93
editor/css/editor.less
View File

@ -1,93 +0,0 @@
@import "./bower_components/lesshat/build/lesshat";
@import (reference) "settings";
body {
margin: 0;
font-family: @font-family_1;
}
.page {
.display(flex);
.flex-direction(row);
}
.header {
.display(flex);
.justify-content(flex-start);
.size(100%, 50px);
background: @color_1;
color: @color_2;
padding: 10px;
&-logo {
color: @color_1;
}
&-title {
color: @color_2;
font-size: @font-size-large;
}
}
.column {
.display(flex);
.size(35%,100%);
background: @color_1;
color: @color_2;
max-width: 350px;
overflow-y: scroll;
overflow-x: hidden;
padding: 20px 10px;
margin: 0 20px 0 0;
h2 {
font-size: @font-size-large;
font-weight: bold;
}
}
.content {
.display(flex);
.flex-direction(column);
.justify-content(space-between);
width: 100%;
padding: 0 10px;
}
.editor {
.display(flex);
.size(90%, 40%);
font-family: @font-family_1;
border: 1px solid fadeout(@color_1, 40%);
}
.button {
.border-radius(4px);
.display(flex);
.justify-content(center);
font-size:@font-size-large;
background: @color_1;
color: @color_2;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
border:0;
width: 50%;
max-width: 150px;
margin: 5px auto;
}
.group {
.display(flex);
.flex-direction(column);
.size(100%,50%);
&:first-of-type {
border-bottom: 1px solid fadeout(@color_1, 80%);
padding: 10px 0;
height: 40%;
}
}

36
editor/css/settings.less
View File

@ -1,36 +0,0 @@
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
//Font weights
@light: 100;
@regular: 400;
@bold: 600;
//Main fonts
@font-family-sans-serif: 'Open sans', sans-serif;
@font-family-serif: serif;
@font-family_1: @font-family-sans-serif;
@font-size-base: 13px;
@font-size-large: @font-size-base * 1.25; // ~15px
@font-size-small: @font-size-base * 0.85; // ~12px
@font-size-mini: @font-size-base * 0.65; // ~11px
@base-line-height: 1.4;
@base-borderRadius: 1px;
@base-whitespace: 20px;
//Base colors
@color_1: rgb(40, 40, 40);
@color_2: rgb(212, 216, 223);
//Color mapping
@color-tap-highlight: rgba(0, 0, 0, .0);
@color-page-background: transparent;
//Images
@image-spinner: url('.png');
//Sprites
@sprite-ui: url('');

250
editor/index.html
View File

@ -1,250 +0,0 @@
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name='viewport' content='width=device-width' />
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="application/javascript; charset=utf-8" />
<meta name="url" content="">
<meta name="alias" content="">
<meta name="copyright" content="" >
<meta name="language" content="English">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../app/img/favicon.ico">
<link rel="stylesheet" href="css/editor.css"/>
<title>
Mermaid editor
</title>
<script src="build.js"></script>
</head>
<body>
<div class="header">
<div class="header-title">mermaid</div>
</div>
<div class="page">
<div class="column">
<article>
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.</p>
<h1>
<a class="" href="#syntax" ><span class=""></span></a>Syntax</h1>
<h2>
<a class="" href="#graph" ><span class=""></span></a>Graph</h2>
<p>This statement declares a new graph and the direction of the graph layout.</p>
<pre><code>graph TD
</code></pre>
<p>This declares a graph oriented from top to bottom.</p>
<p><a href="https://camo.githubusercontent.com/7e1f611d586e9e9701adb3d128306d89bee5cb86/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578332e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7e1f611d586e9e9701adb3d128306d89bee5cb86/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578332e706e67" alt="Example 3" data-canonical-src="http://www.sveido.com/mermaid/img/ex3.png" style="max-width:100%;"></a></p>
<pre><code>graph LR
</code></pre>
<p>This declares a graph oriented from left to right.</p>
<p>Possible directions are:</p>
<ul >
<li>TB - top bottom</li>
<li>BT - bottom top</li>
<li>RL - right left</li>
<li>LR - left right</li>
<li>TD - same as TB</li>
</ul>
<p><a href="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" target="_blank"><img src="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" alt="Example 4" data-canonical-src="http://www.sveido.com/mermaid/img/ex4.png" style="max-width:100%;"></a></p>
<h2>
<a class="" href="#nodes" ><span class=""></span></a>Nodes</h2>
<h3>
<a class="" href="#a-node-default" ><span class=""></span></a>A node (default)</h3>
<pre><code>id1;
</code></pre>
<p><a href="https://camo.githubusercontent.com/a92bd6dbda75eae56d4157b45bfbd833dff61043/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578352e706e67" target="_blank"><img src="https://camo.githubusercontent.com/a92bd6dbda75eae56d4157b45bfbd833dff61043/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578352e706e67" alt="Single node" data-canonical-src="http://www.sveido.com/mermaid/img/ex5.png" style="max-width:100%;"></a></p>
<p>Note that the id is what is displayed in the box.</p>
<h3>
<a id="user-content-a-node-with-text" class="" href="#a-node-with-text" ><span class=""></span></a>A node with text</h3>
<p>It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
one previously defined will be used when rendering the box.</p>
<pre><code>id1[This is the text in the box];
</code></pre>
<p><a href="https://camo.githubusercontent.com/98439dc8af26da18e98ec00ca317bbdc61f6e32e/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578362e706e67" target="_blank"><img src="https://camo.githubusercontent.com/98439dc8af26da18e98ec00ca317bbdc61f6e32e/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578362e706e67" alt="Text in node" data-canonical-src="http://www.sveido.com/mermaid/img/ex6.png" style="max-width:100%;"></a></p>
<h3>
<a id="user-content-a-node-with-round-edges" class="" href="#a-node-with-round-edges" ><span class=""></span></a>A node with round edges</h3>
<pre><code>id1(This is the text in the box);
</code></pre>
<p><a href="https://camo.githubusercontent.com/bef3546487dac334848d27e58cb2ba6825538d28/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578372e706e67" target="_blank"><img src="https://camo.githubusercontent.com/bef3546487dac334848d27e58cb2ba6825538d28/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578372e706e67" alt="Node with round edges" data-canonical-src="http://www.sveido.com/mermaid/img/ex7.png" style="max-width:100%;"></a></p>
<h3>
<a id="user-content-a-node-in-the-form-of-a-circle" class="" href="#a-node-in-the-form-of-a-circle" ><span class=""></span></a>A node in the form of a circle</h3>
<pre><code>id1((This is the text in the box));
</code></pre>
<h3>
<a id="user-content-a-node-in-an-asymetric-shape" class="" href="#a-node-in-an-asymetric-shape" ><span class=""></span></a>A node in an asymetric shape</h3>
<pre><code>id1&gt;This is the text in the box];
</code></pre>
<h3>
<a class="" href="#a-node-rhombus" ><span class=""></span></a>A node (rhombus)</h3>
<pre><code>id1{This is the text in the box};
</code></pre>
<h3>
<a class="" href="#styling-a-node" ><span class=""></span></a>Styling a node</h3>
<p>It is possible to apply specific styles such as a thicker border or a different background color to a node.</p>
<pre><code>graph LR;
id1(Start)--&gt;id2(Stop);
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
</code></pre>
<h4>
<a class="" href="#classes" ><span class=""></span></a>Classes</h4>
<p>More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that
should have a different look.</p>
<p>a class definition looks like the example below:</p>
<pre><code> classDef className fill:#f9f,stroke:#333,stroke-width:4px;
</code></pre>
<p>Attachment of a class to a node is done as per below:</p>
<pre><code> class nodeId1 className;
</code></pre>
<p>It is also possible to attach a class to a list of nodes in one statement:</p>
<pre><code> class nodeId1,nodeId2 className;
</code></pre>
<h4>
<a class="" href="#default-class" ><span class=""></span></a>Default class</h4>
<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
<pre><code> classDef default fill:#f9f,stroke:#333,stroke-width:4px;
</code></pre>
<h2>
<a class="" href="#links-between-nodes" ><span class=""></span></a>Links between nodes</h2>
<p>Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.</p>
<h3>
<a id="user-content-a-link-with-arrow-head" class="" href="#a-link-with-arrow-head" ><span class=""></span></a>A link with arrow head</h3>
<pre><code>A--&gt;B;
</code></pre>
<p><a href="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" target="_blank"><img src="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" alt="Link with arrowhead" data-canonical-src="http://www.sveido.com/mermaid/img/ex4.png" style="max-width:100%;"></a></p>
<h3>
<a class="" href="#an-open-link" ><span class=""></span></a>An open link</h3>
<pre><code>A---B;
</code></pre>
<p><a href="https://camo.githubusercontent.com/6764ce0520fe98f884c178fd46c754e1df3910e0/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831302e706e67" target="_blank"><img src="https://camo.githubusercontent.com/6764ce0520fe98f884c178fd46c754e1df3910e0/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831302e706e67" alt="Open link" data-canonical-src="http://www.sveido.com/mermaid/img/ex10.png" style="max-width:100%;"></a></p>
<h3>
<a id="user-content-text-on-links" class="" href="#text-on-links" ><span class=""></span></a>Text on links</h3>
<pre><code>A---|This is the text|B;
</code></pre>
<p><a href="https://camo.githubusercontent.com/2e92c4ce87b3aacf1ebfb4123dedf0697bb4e388/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831312e706e67" target="_blank"><img src="https://camo.githubusercontent.com/2e92c4ce87b3aacf1ebfb4123dedf0697bb4e388/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831312e706e67" alt="Text on links" data-canonical-src="http://www.sveido.com/mermaid/img/ex11.png" style="max-width:100%;"></a></p>
<h3>
<a id="user-content-styling-links" class="" href="#styling-links" ><span class=""></span></a>Styling links</h3>
<p>It is possible to style links for instance a link that is going back in the flow. This is done by the linkStyle statement as in the example below:</p>
<pre><code>linkStyle 3 stroke:#ff3,stroke-width:4px;
</code></pre>
<h2>
<a id="user-content-interaction" class="" href="#interaction" ><span class=""></span></a>Interaction</h2>
<p>It is possible to bind a click event to a node:</p>
<pre><code>click nodeId callback
</code></pre>
<ul >
<li>nodeId is the id of the node</li>
<li>callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.</li>
</ul>
<h1>
<a id="user-content-credits" class="" href="#credits" ><span class=""></span></a>Credits</h1>
<p>Many thanks to the <a href="http://d3js.org/">d3</a> and <a href="https://github.com/cpettitt/dagre-d3">dagre-d3</a> projects for providing the graphical layout and drawing libraries!</p>
</article>
</div>
<div class="content">
<div class="group">
<textarea class="editor">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</textarea>
<button class="button">Generate</button>
</div>
<div class="group mermaid">
</div>
</div>
</div>
</body>
</html>

380
editor/main.js
View File

File diff suppressed because one or more lines are too long

9
gulp/tasks/dist.js
View File

@ -1,9 +0,0 @@
var gulp = require('gulp')
var concat = require('gulp-concat')
// Build editor
gulp.task('editor', function () {
return gulp.src(['node_modules/d3/d3.min.js', 'node_modules/dagre-d3/dist/dagre-d3.min.js', 'dist/mermaid.slim.js', 'src/editor.js'])
.pipe(concat('build.js'))
.pipe(gulp.dest('./editor/'))
})

16
gulp/tasks/less.js
View File

@ -1,16 +0,0 @@
var gulp = require('gulp')
var path = require('path')
var less = require('gulp-less')
var concat = require('gulp-concat')
gulp.task('editor-less', function () {
gulp.src(['./editor/css/editor.less'])
.pipe(less({
generateSourceMap: false, // default true
paths: [path.join(__dirname, 'less', 'includes')]
}))
.pipe(concat('editor.css'))
.pipe(gulp.dest('./editor/css/'))
})
gulp.task('less', ['editor-less'])

3
package.json
View File

@ -38,8 +38,7 @@
"standard": {
"ignore": [
"**/parser/*.js",
"dist/**/*.js",
"editor/**/*.js"
"dist/**/*.js"
]
},
"dependencies": {

44
src/editor.js
View File

@ -1,44 +0,0 @@
function decodeHTMLEntities (str) {
if (str && typeof str === 'string') {
// strip script/html tags
var element = document.querySelector('.editor')
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '')
element.innerHTML = str
str = element.textContent
element.textContent = ''
}
return str
}
var mermaidEditor = {
$: document.querySelector,
textField: '',
submit: '',
graph: '',
init: function () {
document.querySelector('.button').addEventListener('click', function () {
mermaidEditor.update()
})
},
update: function () {
var txt = document.querySelector('.editor').value
txt = txt.replace(/>/g, '&gt;')
txt = txt.replace(/</g, '&lt;')
txt = decodeHTMLEntities(txt).trim()
document.querySelector('.mermaid').innerHTML = txt
global.mermaid.init()
document.querySelector('.editor').value = txt
}
}
document.addEventListener('DOMContentLoaded', function () {
mermaidEditor.init()
}, false)
exports = mermaidEditor

5
todo.md
View File

@ -2,16 +2,13 @@
- Use external d3-textwrap library
- Problem is it's for d3 v4 only
- Make node console output colors like Chrome console
- Don't version control generated content, move them to outside project
- editor
- What's the correct way to change logLevel as an end user?
- d3 v3 doesn't support 'use strict'
- babel-plugin-transform-remove-strict-mode
- need to remove it after upgrading to d3 v4
- rewrite live editor
- Fix CodeClimate
- What is live-server ?
- Get familar with jison
- webpack warning: lodash too big
- add converalls
- add coveralls
- git graph requires a blank line at the end. why?