DotMDMermaidの図を描くMac用Markdownビューア。
mermaidと付けたコードブロックに図をテキストで書くと、DotMDがページ上に描きます。データはMacの外に出ません。オフラインで動き、ライトでもダークでも表示できます。
macOS 14以降。閲覧は無料で、編集とレビューは1回のお支払いです。
要点
DotMDはMermaidに対応したMac用のMarkdownビューアです。mermaidと付けたコードブロックは、フローチャート、シーケンス図、クラス図、状態遷移図、ER図、ガント図、円グラフ、マインドマップ、タイムライン、Gitグラフとして、オフラインでテーマの色に合わせて描かれます。表示は無料で、ライブプレビュー付きの記述はDotMD Editorに含まれます。
DotMDが描くMermaid図の種類
DotMDにはMermaid 10.9が内蔵されています。次の種類の図を描き、エディタにはそれぞれのテンプレートがあります。
- フローチャートと状態遷移図：手順、分岐、遷移。
- シーケンス図：誰が誰に何を送るかを順番に。
- クラス図とER図：型やテーブルとその関係。
- ガント図とタイムライン：時間に沿った計画や出来事。
- 円グラフ、マインドマップ、Gitグラフ。
図は.mdファイルの中のテキストのままなので変更しやすく、変更はすべてバージョン履歴に残ります。
MacでMarkdownのMermaid図を表示する方法
mermaidと付けたコードブロックは、ソースを表示する代わりに、ページ上で図になります。
-
ファイルを開く
⌘Oを押して.mdファイルかそのフォルダを選ぶか、DotMDにドラッグします。ページを開くと、すべての図が描かれます。
-
近くで見る
図をクリックすると、ページの上に大きく表示されます。ピンチで最大8倍まで拡大でき、ドラッグで移動、Escで戻ります。
-
テーマに合わせる
図はページに合わせます。Aaメニューで選んだテーマに応じて、明るい色か暗い色で描かれます。
ライブプレビューでMermaidを書く
編集はDotMD Editorに含まれます。Editか⌘Eを押してPreview（⌥⌘E）をオンにすると、入力に合わせて図がテキストの横で描き直され、図をクリックするとそのソースに移動します。
Insert → Diagramで、10種類のどれでも動作する例をファイルに挿入でき、そのまま編集できます。
Quick Look、PDF、HTMLでのMermaid
Finderで.mdファイルを選んでスペースキーを押すと、プレビューにも図が表示されます。Quick LookでのMarkdownプレビュー。
Export as PDF…は、図を描いてからPDFを作ります。MacでMarkdownをPDFに。書き出したHTMLファイルは、開くときにインターネットからMermaidを読み込みます。
図が表示されないとき
- 1行目を確認してください。図の種類を示す行で、
flowchart TDやsequenceDiagramなどです。 - 括弧、コロン、引用符を含むラベルは、ダブルクォート
"…"で囲みます。 - 構文に誤りがあると、図の代わりにMermaidのエラーメッセージが表示されます。
MacでのMermaidに関するよくある質問
DotMDはMermaid図をオフラインで表示できますか？
はい。MermaidはDotMDに内蔵されており、インターネットなしでMac上で描画します。書き出したHTMLファイルだけは、インターネットから読み込みます。
Mermaid図の表示は無料ですか？
はい。図入りMarkdownの閲覧、フォルダ、タブ、Quick Lookはずっと無料です。ライブプレビュー付きの編集はDotMD Editor（$14.99の買い切り）に含まれます。
どんなMermaid図が使えますか？
フローチャート、シーケンス図、クラス図、状態遷移図、ER図、ガント図、円グラフ、マインドマップ、タイムライン、Gitグラフです。エディタにはそれぞれのテンプレートがあります。
ライブプレビューでMermaidを編集するには？
DotMD Editorで⌘E、続けて⌥⌘Eを押します。入力に合わせて、図がテキストの横で描き直されます。