mermaidを使う

mermaidという、様々なフォーマットでグラフやネットワークを表現できる言語があります。 私は、少し前にGitHubが、markdown上のmermaidを画像に変換して描画するようにになったのをキッカケに使い始めました。

このブログでも使うことになると思うので、変換のコードを仕込んでおきます。 このエントリは、結果の確認用です 👶

``` mermaid
flowchart TD
  A --> B --> C
  A --> D --> C
  D --> D
```

mermaidを使うと、上のようなテキスト表現が、下のような画像に変換されます。 この画像は、HTMLファイル上に書かれた上のようなコードを、ロード時にJSで変換して表示しています。

flowchart TD
  A --> B --> C
  A --> D --> C
  D --> D

mermaidについて詳しくは公式ページを参照下さい。

また、オンライン上で使えるlive editorも便利です。