Skip to main content

Mermaid

Official Example​

Examples | Mermaid

Mermaid in draw.io​

Blog - Use Mermaid syntax to create diagrams

CDN​

<script  src=”https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js"></script>

Include Mermaid​

<script  src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Example​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner test);
  </div>
	<script  src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js"></script>
	<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>