mermaid は図をテキストで定義するための言語です。図をテキストで定義するための言語としての競合相手には PlantUML などがいます。
mermaid-js/mermaid： Generation of diagram and flowchart from text in a similar manner as markdown
シンプルなテキストファイルで UML が書ける、オープンソースのツール
マニュアルは次リンクです。
mermaid などによりテキストで管理することよる利点には Git による差分管理、使用する容量の削減、プログラミングによる自動生成がしやすい、などといった点があります。mermaid で特筆すべき利点として導入しやすく、図としての表示もしやすいという点があります。次の様に mermaid-js から配信される JavaScript ファイルと mermaid 記法のテキストを使うだけでブラウザ上で図を表示できます。
<div class="mermaid">
graph LR
A --> C
B --> C
B --> D
C --> D
</div>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
この図示のしやすさからか GitHub のマークダウン表示において自動で図として表示される様になっています。これまで GitHub 上で相手にテキスト管理した図を見せるには、相手にブラウザの拡張機能を入れてもらうか。一々画像ファイルに変換してマークダウンから参照する様にするかしていましたが、それが不要になります。
上記デモの様に JavaScript のオンラインエディターを使うのもいいですが、mermaid 専用のオンラインエディターも用意されています。これは次リンクから飛べます。ひな形や補完等がそろっており頼りになります。
Online FlowChart & Diagrams Editor – Mermaid Live Editor
手軽さという点で mermaid は優秀ですが、欠点として見た目の整形が難しいという点があります。自分の場合は特にクラス図、ER図において任意のノードを囲えない、線の向きや長さを制御できないという点が辛いです。このあたり PlantUML は得意なので、簡単な図をちゃちゃっと扱うための mermaid、複雑な図もまとめられる PlantUML の様に使い分けるのがよさそうです。
