UNPKG

mermaid

Version:

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.

137 lines (115 loc) 3.11 kB
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../dist/mermaid.forest.css"/> <script src="../dist/mermaid.js"></script> <script> var config = { startOnLoad:true, callback:function(id){ console.log(id,' rendered'); }, flowchart:{ useMaxWidth:false, htmlLabels:true }, logLevel:5 }; mermaid.initialize(config); </script> </head> <body> <h1>Line Interpolation Linear (default)</h1> <div class="mermaid" id="linear"> graph TB A --> B B --> C C --> D D --> A </div> <h1>Line Interpolation Basis</h1> <div class="mermaid" id="basis"> graph TB linkStyle default interpolate basis fill:none; A --> B B --> C C --> D D --> A </div> <h1>Line Interpolation Step-After</h1> <div class="mermaid" id="step-after"> graph TB linkStyle default interpolate step-after fill:none; A --> B B --> C C --> D D --> A </div> <h1>Hierarchy Using Defaults</h1> <div class="mermaid" id="default-hier"> graph TB A --> B A --> C A --> D A --> E B --> B1 B --> B2 </div> <h1>Hierarchy Using step-after</h1> <div class="mermaid" id="hierarchy"> graph TB linkStyle default interpolate step-after fill:none; A --> B A --> C A --> D A --> E B --> B1 B --> B2 </div> <h1>LR Hierarchy Using step-before</h1> <div>step-after works here too</div> <div class="mermaid" id="hierarchy"> graph LR linkStyle default interpolate step-before fill:none; A --> B A --> C A --> D A --> E B --> B1 B --> B2 </div> <h1>Line Interpolation Cardinal</h1> <div class="mermaid" id="cardinal"> graph TB linkStyle default interpolate cardinal fill:none; A --> B A --> C A --> D D --> A </div> <h1>Line Interpolation Monotone</h1> <div>Monotone is monotonic in y, so it only looks good LR</div> <div class="mermaid" id="monotone"> graph LR linkStyle default interpolate monotone fill:none; A --> B B --> C C --> D D --> A </div> <h1>Mixing Line Interpolation Types</h1> <div>Specify the link number; the link must be defined first</div> <div class="mermaid" id="mixed"> graph TB A -- basis --> B A -- linear --> C C -- step-after --> D D -- cardinal --> A linkStyle 0 interpolate basis fill:none; linkStyle 1 interpolate linear fill:none; linkStyle 2 interpolate step-after fill:none; linkStyle 3 interpolate cardinal fill:none; </div> </body> </html>