mermaid.jsって??
公式ドキュメントはこちらです
「Javascriptベースのダイアグラム作成およびチャート作成ツール」です。コードで図を作成することができます!2020/11/27現在ではフローチャート、シーケンス図、ガントチャート、クラス図、ユーザージャーニーダイアグラムなどをサポートしています。詳しい記載方法は公式ドキュメントか自分がまとめた別記事をご覧いただければ幸いです。
「Mermaid Live Editor」というブラウザ上でmermaid.jsの記載とプレビュー、出力を行う事のできるサービスを利用します。まずはこちらにアクセスしてみてください。 ↓
下記のようなページが開くと思います。
初期段階でフローチャートが記載されています(クリスマスに買い物をするというフローチャートです。なんだかワクワクしますよね。)見ればわかると思いますが「Code」の部分のコードを記載して結果が「Preview」表示されます。
試しに下記の内容を「Code」に記載してみましょう。
graph LR
A[起床] --> B[朝食]
B --> C[作業]
C --> D[昼食]
D --> E[作業]
E --> F[夕飯]
F --> G[就寝]
G --> A
下記のようにプレビューに下記の図が表示されていると思います。
表示されている図を画像ファイルとしてダウンロードしてみましょう。「Actions」にある「PNG」ボタンをクリックすることで図形を画像ファイルでダウンロードすることができます。
ダウンロードする形式もpngとsvgで選べたり、図を表示するためのリンクを作成することもできます。
最近だとQiitaもmermaidの作図に対応したりとこれからも盛り上がりそうで嬉しいです!
ちなみに下記のように記載することでQiitaの記事でも作図が可能です!