mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-21 00:09:51 +02:00
New release
This commit is contained in:
Knut Sveidqvist
227
dist/www/demos.html
vendored
Normal file
227
dist/www/demos.html
vendored
Normal file
@@ -0,0 +1,227 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
|
||||
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
|
||||
|
||||
<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
|
||||
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
|
||||
<link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="javascripts/lib/mermaid.js"></script>
|
||||
<script src="javascripts/all.js" type="text/javascript"></script>
|
||||
<script src="javascripts/highlight.pack.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
var g = function (hljs) {
|
||||
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
|
||||
var keyw = {
|
||||
keyword: 'graph sequenceDiagram participant loop end',
|
||||
typename: 'Note',
|
||||
literal: "false true left right"
|
||||
};
|
||||
return {
|
||||
case_insensitive: false,
|
||||
aliases: ["mermaid"],
|
||||
k: keyw,
|
||||
i: 'for',
|
||||
c: [{
|
||||
cN: "function",
|
||||
b: "^" + r + "\\s*\\(",
|
||||
e: "->",
|
||||
rB: !0,
|
||||
i: "\\(|#|//|/\\*|\\\\|:|;",
|
||||
starts: {
|
||||
e: ";|\\.", k: keyw, c: [
|
||||
{cN: "comment", b: "%", e: "$"}
|
||||
]
|
||||
}
|
||||
},
|
||||
{cN: "comment", b: "%", e: "$"}
|
||||
]
|
||||
};
|
||||
};
|
||||
hljs.registerLanguage('mermaid', g);
|
||||
hljs.initHighlightingOnLoad();
|
||||
$(function () {
|
||||
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
|
||||
});
|
||||
var callback = function(){
|
||||
alert('A callback was triggered');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="index">
|
||||
<a href="#" id="nav-button">
|
||||
<span>
|
||||
NAV
|
||||
<img src="images/navbar.png"/>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="tocify-wrapper">
|
||||
<img src="images/logo.png"/>
|
||||
|
||||
<div class="lang-selector" style="display:none">
|
||||
<a href="#" data-language-name="shell">shell</a>
|
||||
<a href="#" data-language-name="javascript">javascript</a>
|
||||
<a href="#" data-language-name="html">html</a>
|
||||
<a href="#" data-language-name="css">css</a>
|
||||
</div>
|
||||
<div class="search">
|
||||
<input type="text" class="search" id="input-search" placeholder="Search">
|
||||
</div>
|
||||
<ul class="search-results"></ul>
|
||||
<div id="toc">
|
||||
</div>
|
||||
<ul class="toc-footer">
|
||||
<div style="margin-left:5px;">
|
||||
<a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
|
||||
<a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
|
||||
<a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
|
||||
</div>
|
||||
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
||||
<li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-wrapper">
|
||||
<div class="dark-box"></div>
|
||||
<div class="content">
|
||||
<h1 id="demos">Demos</h1>
|
||||
<h2 id="basic-flowchart">Basic flowchart</h2>
|
||||
<pre class="css"><code>%% Example diagram
|
||||
graph LR
|
||||
A[Square Rect] -- Link text --> B((Circle))
|
||||
A --> C(Round Rect)
|
||||
B --> D{Rhombus}
|
||||
C --> D</code></pre><div class="mermaid">graph LR
|
||||
A[Square Rect] -- Link text --> B((Circle))
|
||||
A --> C(Round Rect)
|
||||
B --> D{Rhombus}
|
||||
C --> D</div><h2 id="larger-flowchart-with-some-styling">Larger flowchart with some styling</h2>
|
||||
<pre class="css"><code>%% Code for flowchart below
|
||||
graph TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A subgraph
|
||||
od>Odd shape]-- Two line<br>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange</code></pre><div class="mermaid">graph TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A subgraph
|
||||
od>Odd shape]-- Two line<br>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange</div><h2 id="basic-sequence-diagram">Basic sequence diagram</h2>
|
||||
<pre class="css"><code>%% Sequence diagram code
|
||||
sequenceDiagram
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Alice->John: Yes... John, how are you?</code></pre><div class="mermaid">sequenceDiagram
|
||||
Alice->> Bob: Hello Bob, how are you?
|
||||
Bob-->> John: How about you John?
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
|
||||
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Alice->John: Yes... John, how are you?</div><h2 id="loops-alt-and-opt">Loops, alt and opt</h2>
|
||||
<pre class="css"><code>%% Sequence diagram code
|
||||
sequenceDiagram
|
||||
loop Daily query
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
|
||||
opt Extra response
|
||||
Bob->>Alice: Thanks for asking
|
||||
end
|
||||
end</code></pre><div class="mermaid">sequenceDiagram
|
||||
loop Daily query
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
|
||||
opt Extra response
|
||||
Bob->>Alice: Thanks for asking
|
||||
end
|
||||
end</div><h2 id="message-to-self-in-loop">Message to self in loop</h2>
|
||||
<pre class="css"><code>%% Sequence diagram code
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!</code></pre><div class="mermaid">sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!</div>
|
||||
|
||||
</div>
|
||||
<div class="dark-box">
|
||||
<div class="lang-selector">
|
||||
<a href="#" data-language-name="shell">shell</a>
|
||||
<a href="#" data-language-name="ruby">ruby</a>
|
||||
<a href="#" data-language-name="python">python</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user