Mermaid Preview

ポイント

Mermaidプレビューは文書に入れるフロー・シーケンス図をリポジトリにコミットする前に描くときに使います。jsDelivr mermaid 10を動的ロードし、ブラウザでSVGに描画します。ソースはサーバーへ送られません。GitHub Markdownと文法はほぼ同じですが、バージョン差で一部拡張が違うことがあります。

クラス図、ガント、ERなどmermaid 10が対応する種類はだいたい試せます。とても大きなグラフはブラウザが重いことがあります。セキュリティ上、外部画像リンクやHTML挿入は制限されることがあります。エラーメッセージの行番号を見て矢印・ノードIDを直せばよいです。

例

例flowchart TDでA開始が条件Bへ行き、Yesなら完了、Noなら再試行のグラフをプレビューすると箱とひし形が描かれます。sequenceDiagramで参加者と矢印を書くと時間順のメッセージが見えます。ノードIDに空白があると文法エラーになるので、英文IDと括弧ラベルを分けてください。シーケンス図は参加者宣言を上にまとめると矢印行が短くなります。文書に入れるときは描画が成功したソースだけコピーし、バージョン差を減らしてください。同じ入力を何度も試すときはリセットしてから貼り直し、前回の出力と混ざらないようにします。共用パソコンでは作業後に欄を空にし、原文が画面に残らないようにしてください。ブラウザのタブを閉じれば貼った値も消え、サーバーへ削除依頼を送る必要はありません。ボタン名と欄の見出しは画面上部のツールと同じなので、文章を読みながらそのまま操作できます。結果が空なら、必須欄を埋めたか、エラーメッセージが隠れていないかを先に確認します。この文章は使い方の案内であり、入力データが外部保存先に残るという意味ではありません。モバイルではコピーボタンがクリップボード権限を求めることがあるので、許可してから再度タップしてください。

関連: Markdownプレビュー · LaTeX数式プレビュー