こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。
Mermaid記法はテキストのみで、ガントチャートや円グラフなどのチャートや、クラス図やシーケンス図と言ったUMLで用いられるシステム可視化表現を行えます。
このMermaidは様々なMarkdownエディタでも利用できます。今回はGUIとWeb、それぞれに分けてMarkdownエディタを紹介します。
目次
Webサービス
NotePM
NotePMでは他のMarkdownエディタと同じくコードブロックに対して mermaid を付けることでMarmeid記法が使えるようになります。右側のライブプレビューでは、編集した内容が即座に反映されます。
Mermaidの他、PlantUMLや数式（TeX記法）にも対応していますので、開発者などの情報共有にも利用できます。システムに関する情報を記しておくことで、社内ナレッジの共有と蓄積に役立ててください。
URL：NotePM – 社内wikiでナレッジ共有・マニュアル作成
GitHub
GitHubのMarkdown表示に対してMermaid記法が使えるようになっています。サンプルとして、mermaid-js/mermaidにて確認できます。
描画した図の右上に拡大アイコンがあり、選択した図だけを表示させることができます。込み入った図を確認する際に便利そうです。
URL：GitHub
HackMD
HackMDは2ペイン型のMarkdwonエディタです。ツールバーがあり、Markdown記法の入力をサポートしてくれます。オンラインでのコラボレーション（複数人での編集）機能も便利です。
Mermaid記法については、独自のハイライトが施されるのが便利です。これによって記法のミスを防いだり、編集しやすくなるでしょう。
URL：HackMD
Mermaid Live Editor
Mermaid Live Editorはエディタではありませんが、Mermaidのライブエディタとして紹介します。左側にエディタ、右側にプレビューを表示します。Mermaidがサポートするチャートのサンプルが登録されているので、その書き方や何ができるのかを学ぶのに便利でしょう。
プレビュー結果はPNGやSVGとしてダウンロードできます。また、Mermaid Live Editorのサーバー上で図を描画するURLも生成されます。
GUI・エディタ
Joplin
Joplinは全部で4つのカラムからなるMarkdownエディタです。一番左にノートブック、次にノートブックに入っているMarkdownファイル、その次がエディタ、そして最後がプレビューになります。コードブロックにてMermaidを指定すると、その中でMermaid記法が利用できます。
機能はスペルチェッカー、外部クラウドとの同期、他のユーザーとのコラボレーション、データ暗号化、Webサイトをクリッピングする機能があります。メディアとして画像だけでなく、PDFや動画、オーディオファイルを扱えるのもポイントです。
URL：Joplin
Typora
モダンなUIのMarkdownエディタとして知られるTyporaでは、Mermaid記法によって描かれた図がインラインに描画されます。
この図をクリックすると、編集モードになります。編集モードでは元々のテキストが表示され、編集後にフォーカスを外すとテキストが非表示になります。
URL：Typora — a markdown editor, markdown reader.
MacDown
MacDownはデフォルトではMermaidに対応していませんので、設定のレンダリングにあるMermaidを有効にします。こうするとMermaid記法で書いた内容がプレビューにて図として描画されます（一部対応していない記法があります）。
MacDownはバージョン管理があり、過去の内容に戻すことができます。また、リンク先のファイルを自動で作成する機能を使うと、Wikiのようにコンテンツが管理できます。
URL：MacDown: The open source Markdown editor for macOS
Zettlr
ZettlrはインラインでMarkdownを描画するエディタです。Mermaid記法で書けば、それがインラインの中で図として描画されます。左側に文書の一覧、右側にエディタとシンプルな作りになっています。
Mermaid記法を編集する場合には図をクリックすれば編集モードになります。この時にはプレビューはないので注意してください。Markdownファイル以外のドキュメントも登録可能で、それらをアセットマネージャーという機能で管理しています。ナレッジベースとして使えるでしょう。
URL：Zettlr
Markdown Preview Mermaid Support – Visual Studio Marketplace
Visual Studio CodeでMermaidを描画する際にはMarkdown Preview Mermaid Supportをインストールします。これをインストールした状態でMarkdownファイルのプレビューを実行すると、Mermaid記法の部分が図になってプレビュー表示されます。
Visual Studio Code機能拡張であれば、普段使っているエディタのまま利用できるので便利です。開発ドキュメントなどでも使えるでしょう。
URL：Markdown Preview Mermaid Support – Visual Studio Marketplace
まとめ
Mermaidは主に開発チーム向けの記法にはなりますが、円グラフやガントチャートは他の業務でも利用できるでしょう。わざわざ表計算ソフトウェアで作ったり、画像にして貼り付ける方法ではメンテナンスが大変です。ぜひMermaid記法を覚えてください。
Mermaid記法については以下の記事に詳細を掲載しています。NotePMでの情報共有にMermaidを役立ててください。
Mermaid記法の書き方（Markdownテキストでチャート・グラフが描ける） – NotePM
NotePM（ノートピーエム） は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。
NotePMの特徴
- マニュアル作成、バージョン管理、社外メンバー共有
- 強力な検索機能。PDFやExcelの中身も全文検索
- 社内FAQ・質問箱・社内ポータルとしても活用できる
- 銀行、大学も導入している高度なセキュリティ。安全に情報共有できる
URL: https://notepm.jp/