137 lines
3.0 KiB
HTML
137 lines
3.0 KiB
HTML
<!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>
|