mermaid

<!DOCTYPE html> <html> <head> <title>demos.md</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../doc-style.css" /> <script src="../doc-filelist.js"></script> <script> var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/docs/demos.md", defaultSidebar = true; </script> <script src="../doc-script.js"></script> <script src="../mermaid.js"></script> <link rel="stylesheet" href="../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#Demos">Demos</a> </div> <div class="heading h2"> <a href="#Basic flowchart">Basic flowchart</a> </div> <div class="heading h2"> <a href="#Larger flowchart with some styling">Larger flowchart with some styling</a> </div> <div class="heading h2"> <a href="#Basic sequence diagram">Basic sequence diagram</a> </div> <div class="heading h2"> <a href="#Loops, alt and opt">Loops, alt and opt</a> </div> <div class="heading h2"> <a href="#Message to self in loop">Message to self in loop</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="docs markdown"><div class="pilwrap" id="Demos"> <h1> <a href="#Demos" name="Demos" class="pilcrow">¶</a> Demos</h1> </div> <div class="pilwrap" id="Basic flowchart"> <h2> <a href="#Basic flowchart" name="Basic flowchart" class="pilcrow">¶</a> Basic flowchart</h2> </div> <div class="highlight"><pre><code>%% Example diagram graph LR A[Square Rect] -- Link text -- B((Circle)) A -- C(Round Rect) B -- D{Rhombus} C -- D </code></pre></div> <script>mermaid.initialize({startOnLoad:true});</script><div class="mermaid">graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D</div><div class="pilwrap" id="Larger flowchart with some styling"> <h2> <a href="#Larger flowchart with some styling" name="Larger flowchart with some styling" class="pilcrow">¶</a> Larger flowchart with some styling</h2> </div> <div class="highlight"><pre><code>%% Code for flowchart below graph TB sq[Square shape] -- ci((Circle shape)) subgraph A subgraph odOdd shape]-- Two linelt;bredge comment -- ro di{Diamond with lt;br/ line break} -.- ro(Roundedlt;brsquarelt;brshape) di==ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e -- od3Really long text with linebreaklt;brin an Odd shape] %% Comments after double percent signs e((Inner / circlelt;brand some odd lt;brspecial 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> <div class="mermaid">graph TB sq[Square shape] --> ci((Circle shape)) subgraph A subgraph od>Odd shape]-- Two line edge comment --> ro di{Diamond with line break} -.-> ro(Rounded square 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 in an Odd shape] %% Comments after double percent signs e((Inner / circle and some odd 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><div class="pilwrap" id="Basic sequence diagram"> <h2> <a href="#Basic sequence diagram" name="Basic sequence diagram" class="pilcrow">¶</a> Basic sequence diagram</h2> </div> <div class="highlight"><pre><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 longlt;br/long time, so longlt;br/that the text doeslt;br/not fit on a row. Bob--Alice: Checking with John... Alice-John: Yes... John, how are you? </code></pre></div> <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 long time, so long that the text does not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?</div><div class="pilwrap" id="Loops, alt and opt"> <h2> <a href="#Loops, alt and opt" name="Loops, alt and opt" class="pilcrow">¶</a> Loops, alt and opt</h2> </div> <div class="highlight"><pre><code>%% Sequence diagram code sequenceDiagram loop Daily query Alice-gt;gt;Bob: Hello Bob, how are you? alt is sick Bob-gt;gt;Alice: Not so good :( else is well Bob-gt;gt;Alice: Feeling fresh like a daisy end opt Extra response Bob-gt;gt;Alice: Thanks for asking end end </code></pre></div> <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><div class="pilwrap" id="Message to self in loop"> <h2> <a href="#Message to self in loop" name="Message to self in loop" class="pilcrow">¶</a> Message to self in loop</h2> </div> <div class="highlight"><pre><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 thoughtslt;br/prevail... John--Alice: Great! John-Bob: How about you? Bob--John: Jolly good! </code></pre></div> <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 prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!</div></div> </div> </body> </html>