marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-29 20:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

New version

Browse Source
This commit is contained in:
knsv
2015-10-04 23:09:00 +02:00
parent 8258fb059c
commit a611ff3abd
17 changed files with 140 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
test/examples/leadingComments.html
View File

@@ -27,14 +27,5 @@
Ali#45;ce->>John: Hello John, how are you? #60;
John-->>Alice: Great!#quot;
</div>
<div class="mermaid" id="i211">
graph LR;
A[Hard edge]-->|Link text|B(Round edge);
B-->C{Decision};
C-->|One|D[Result one];
C-->|Two|E[Result two];
classDef pink fill:#f9f,stroke:#333,stroke-width:4px;
class C pink;
</div>
</body>
</html>

5
test/sconf.json
View File

@@ -3,9 +3,10 @@
"diagramMarginY": 10,
"actorMargin": 50,
"width": 150,
"height": 165,
"height": 15,
"boxMargin": 10,
"boxTextMargin": 5,
"noteMargin": 10,
"messageMargin": 35
"messageMargin": 35,
"mirrorActors":false
}

24
test/web.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<script src="../dist/mermaid.051.js"></script>
<script>
var config = {
startOnLoad:true,
@@ -41,7 +41,7 @@
graph LR
%% Example diagram
A[Square Rect] -- Link text --> B((Circle))
A[Square Rect] -- Link text --> B((Circle));
A --> C(Round Rect)
click A coolAction
B --> D{Rhombus}
@@ -162,28 +162,20 @@
class sq,e green
class di orange
</div>
<div class="mermaid2">
<div class="mermaid">
graph TB
subgraph
subgraph f
sq[Square shape]-->ci((Circle shape))
od>Odd shape]---|Two line<br>edge comment|ro
end
subgraph
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape]
di{Diamond is broken}-->ro(Rounded squar shape);
di-->ro2(Rounded square shape)
end
%% Comments after double percent signs
subgraph
e((Inner / circle))-->f(,.?!+-*ز);
cyr[Cyrillic]-->cyr2((Circle shape Начало));
A[Object foo,bar]-->B(Thing)
end
style e red;
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
class green sq
</div>
<div class="mermaid2">
<div class="mermaid">
graph LR;
A(Central Message Router);
B(R TD);

28
test/web_style.html
View File

@@ -2,8 +2,8 @@
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<link rel="stylesheet" href="../dist/mermaid.css"/>
<script src="../dist/mermaid.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
@@ -16,15 +16,15 @@
}
</script>
<style>
.node-square {
.node-square > rect {
stroke-width: 4px;
stroke: #339933;
fill: #999900;
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px; }
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-circle > rect{ stroke-width: 0.5px; stroke: #339999; fill: #009900; }
.node-odd-override > polygon{ stroke-width: 3.5px; stroke: #339900; fill: #009999; }
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
</style>
@@ -94,8 +94,8 @@
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
classDef node-e1 fill:#990066,stroke:#666622
classDef node-e2 fill:#990066,stroke:#666622
</pre>
<div class="mermaid">
@@ -120,23 +120,23 @@
cyr-->|Complex<br>multiline<br>edge label|ncdef;
class cyr node-cyr;
class od2 node-odd-override;
classDef node-odd-override fill:#BB00BB,stroke:#666622;
classDef node-cyr fill:#BB0099,stroke:#666622;
classDef node-odd-override fill:#BB00BB,stroke:#666622
classDef node-cyr fill:#BB0099,stroke:#666622
e1[Class node-cyr<br />defined by classDef<br />and inline style];
class e1 node-e1;
style e1 fill:#FF0000;
style e1 fill:#FF0000
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
class e2 node-e2;
style e2 fill:#FF0000;
style e2 fill:#FF0000
e((Inline style in<br />graph definition));
style e fill:#FF0000;
style e fill:#FF0000
ninl[Inline style];
e-->ninl;
e1-->ninl;
e2-->ninl;
classDef node-e1 fill:#990066,stroke:#666622;
classDef node-e2 fill:#990066,stroke:#666622;
classDef node-e1 fill:#990066,stroke:#666622
classDef node-e2 fill:#990066,stroke:#666622
</div>

2
test/web_style_html_label.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<script src="../dist/mermaid.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,