mermaid

<!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 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"]); }); </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"> <li><a href='http://github.com/tripit/slate'>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>