🧜‍♀️

mermaid-jsのサンプルを動かしてみる

2022/02/17に公開

概要

GiHubでmermaid-jsが採用されたことを受け下記リポジトリでmermaid-js公式に載っているグラフをGitHubで書いてみました。
 
https://github.com/yellowsman/mermaid-demo#mermaid-demo

Zennでもmermaid-jsに対応されているので、描画に違いがあるのか試してみました。
以下のグラフのmarkdownテキストの内容はすべて上記リポジトリと同じです。

Flowchart

Sequence diagram

Gantt diagram

Class diagram

Git graph - exclamation experimental

Entity Relationship Diagram - exclamation experimental

User Journey Diagram


以下はmermaid公式のサンプルの一部に記載されていたもの

Basic Pie Chart

Basic sequence diagram

Basic flowchart

Larger flowchart with some styling

SequenceDiagram: Loops, alt and opt

SequenceDiagram: Message to self in loop

Discussion