mermaid/demos/index.html at f8755efe71276375ec4f86764bafdda93e168a34 · mermaid-js/mermaid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>

  <body>
    <h1>Mermaid quick test and demo pages</h1>
    <p>
      Some of these pages have duplicates; some are slow to load because they have so many graphs.
    </p>
    <p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
    <p>
      If you'd like to clean up one of the pages, please feel free to
      <a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
    </p>

    <ul>
      <li>
        <h2><a href="./interactive.html">Interactive &amp; Parameterised Diagrams ✨</a></h2>
      </li>
      <li>
        <h2><a href="./c4context.html">C4 Context</a></h2>
      </li>
      <li>
        <h2><a href="./classchart.html">Class diagrams</a></h2>
      </li>
      <li>
        <h2><a href="./dataflowchart.html">Data flow charts</a></h2>
      </li>
      <li>
        <h2><a href="./er.html">Entity Relation diagram</a></h2>
      </li>
      <li>
        <h2><a href="./flowchart.html">Flow charts</a></h2>
      </li>
      <li>
        <h2>
          <a href="./flowchart_expanded_node_shapes.html">Flowchart - expanded node shapes</a>
        </h2>
      </li>
      <li>
        <h2><a href="./gantt.html">Gantt</a></h2>
      </li>
      <li>
        <h2><a href="./git.html">Git</a></h2>
      </li>
      <li>
        <h2><a href="./info.html">Info</a></h2>
      </li>
      <li>
        <h2><a href="./journey.html">Journey</a></h2>
      </li>
      <li>
        <h2><a href="./mindmap.html">Mindmap</a></h2>
      </li>
      <li>
        <h2><a href="./ishikawa.html">Ishikawa</a></h2>
      </li>
      <li>
        <h2><a href="./pie.html">Pie</a></h2>
      </li>
      <li>
        <h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
      </li>
      <li>
        <h2><a href="./xychart.html">XY charts</a></h2>
      </li>
      <li>
        <h2><a href="./requirements.html">Requirements</a></h2>
      </li>
      <li>
        <h2><a href="./sequence.html">Sequence</a></h2>
      </li>
      <li>
        <h2><a href="./state.html">State</a></h2>
      </li>
      <li>
        <h2><a href="./timeline.html">Timeline</a></h2>
      </li>
      <li>
        <h2><a href="./zenuml.html">ZenUML</a></h2>
      </li>
      <li>
        <h2><a href="./sankey.html">Sankey</a></h2>
      </li>
      <li>
        <h2><a href="./packet.html">Packet</a></h2>
      </li>
      <li>
        <h2><a href="./block.html">Layered Blocks</a></h2>
      </li>
      <li>
        <h2><a href="./architecture.html">Architecture</a></h2>
      </li>
      <li>
        <h2><a href="./eventmodeling.html">Event Modeling</a></h2>
      </li>
      <li>
        <h2><a href="./radar.html">Radar</a></h2>
      </li>
      <li>
        <h2><a href="./venn.html">Venn diagram</a></h2>
      </li>
      <li>
        <h2><a href="./treeView.html">TreeView</a></h2>
      </li>
    </ul>
  </body>
</html>