mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
Mermaid editor added
This commit is contained in:
knsv
commit
c067b31a57
2901
editor/build.js
Normal file
2901
editor/build.js
Normal file
File diff suppressed because one or more lines are too long
144
editor/css/editor.css
Normal file
144
editor/css/editor.css
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
|
||||||
|
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
Normal file
93
editor/css/editor.less
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
@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
Normal file
36
editor/css/settings.less
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
@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
Normal file
250
editor/index.html
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
<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>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)-->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-->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>
|
||||||
386
editor/main.js
Normal file
386
editor/main.js
Normal file
File diff suppressed because one or more lines are too long
25
gulpfile.js
25
gulpfile.js
@ -1,5 +1,7 @@
|
|||||||
var gulp = require('gulp');
|
var gulp = require('gulp');
|
||||||
|
var path = require('path');
|
||||||
var jison = require('gulp-jison');
|
var jison = require('gulp-jison');
|
||||||
|
var less = require('gulp-less');
|
||||||
var shell = require('gulp-shell');
|
var shell = require('gulp-shell');
|
||||||
var concat = require('gulp-concat');
|
var concat = require('gulp-concat');
|
||||||
var uglify = require('gulp-uglify');
|
var uglify = require('gulp-uglify');
|
||||||
@ -46,6 +48,16 @@ gulp.task('coverage', function (cb) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
gulp.task('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/'));
|
||||||
|
});
|
||||||
|
|
||||||
var browserify = require('gulp-browserify');
|
var browserify = require('gulp-browserify');
|
||||||
|
|
||||||
// Basic usage
|
// Basic usage
|
||||||
@ -60,6 +72,19 @@ gulp.task('slimDist', function() {
|
|||||||
.pipe(gulp.dest('./dist/'));
|
.pipe(gulp.dest('./dist/'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Build editor
|
||||||
|
gulp.task('editor', function() {
|
||||||
|
/*gulp.src(['src/editor.js'])
|
||||||
|
.pipe(browserify())
|
||||||
|
.pipe(concat('main.js'))
|
||||||
|
.pipe(gulp.dest('./editor/'));*/
|
||||||
|
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/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// Basic usage
|
// Basic usage
|
||||||
gulp.task('fullDist', ['slimDist'], function() {
|
gulp.task('fullDist', ['slimDist'], function() {
|
||||||
// Single entry point to browserify
|
// Single entry point to browserify
|
||||||
|
|||||||
@ -42,6 +42,8 @@
|
|||||||
"lodash.templatesettings": "^2.4.1",
|
"lodash.templatesettings": "^2.4.1",
|
||||||
"lodash.values": "^2.4.1",
|
"lodash.values": "^2.4.1",
|
||||||
"mock-browser": "^0.90.27",
|
"mock-browser": "^0.90.27",
|
||||||
"rewire": "^2.1.3"
|
"rewire": "^2.1.3",
|
||||||
|
"gulp-less": "^1.3.6",
|
||||||
|
"path": "^0.4.9"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
47
src/editor.js
Normal file
47
src/editor.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
function decodeHTMLEntities (str) {
|
||||||
|
if(str && typeof str === 'string') {
|
||||||
|
// strip script/html tags
|
||||||
|
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();
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function () {
|
||||||
|
var txt = document.querySelector('.editor').value;
|
||||||
|
txt = txt.replace(/>/g,'>');
|
||||||
|
txt = txt.replace(/</g,'<');
|
||||||
|
txt = decodeHTMLEntities(txt).trim();
|
||||||
|
|
||||||
|
document.querySelector('.mermaid').innerHTML = txt;
|
||||||
|
mermaid.init();
|
||||||
|
document.querySelector('.editor').value = txt;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
mermaidEditor.init();
|
||||||
|
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
exports = mermaidEditor;
|
||||||
Loading…
x
Reference in New Issue
Block a user