Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/README.md

Last active March 5, 2022 18:56
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save tonyfast/b77d1cb766f65f026c67 to your computer and use it in GitHub Desktop.
Save tonyfast/b77d1cb766f65f026c67 to your computer and use it in GitHub Desktop.
Download ZIP
Mermaid - Markdown for diagrams
Raw
README.md

Mermaid - Markdown for Diagrams

Mermaid has been popping up in my Github Daily Emails. It is used for "Generation of diagram and flowchart from text in a similar manner as markdown".

Example Usage

In index.html, a Mermaid diagram is defined within a <div class="mermaid">. A chuck of Mermaid syntax is place in between the block element. The syntax determines the shape, connections, and text annotating the diagram. Below is some syntax that generates the graph on bl.ocks.org.

Example Syntax

<div class="mermaid">
{{{mermaid.graph}}}
  </div>
  </body>

This Gist

Fork this gist and create your own diagrams and host them on bl.ocks.org.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/0.3.0/mermaid.full.min.js"></script>
</head>
<body>
<div class="mermaid">
{{{mermaid.graph}}}
</div>
</body>
</html>
Raw
mermaid.yaml
graph: |
graph LR;
A[Physics Based Model]-->B(Feature Identification);
B-->C(Feature Encoding);
B-->b1((segmentation));
C-->D(Data Analytics);
C-->c1((spatial statistics));
D-->|collaborate|E{Design};
D-->d1((PCA));
E-->|iterate|A;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment