Mermaid記法の使えるMarkdownエディタ、Webサービスまとめ

2024年06月18日(火) Markdown

こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。

社内のナレッジ共有・マニュアル作成を成功させるツール「NotePM」→無料で使ってみる【1分で登録完了】

Mermaid記法はテキストのみで、ガントチャートや円グラフなどのチャートや、クラス図やシーケンス図と言ったUMLで用いられるシステム可視化表現を行えます。

このMermaidは様々なMarkdownエディタでも利用できます。今回はGUIとWeb、それぞれに分けてMarkdownエディタを紹介します。

Markdownで簡単にドキュメントを作れるツール「NotePM」
→今すぐ無料で使ってみる(1分で完了・クレカ登録不要)

Webサービス

NotePM

NotePMでは他のMarkdownエディタと同じくコードブロックに対して mermaid を付けることでMarmeid記法が使えるようになります。右側のライブプレビューでは、編集した内容が即座に反映されます。

Mermaidの他、PlantUMLや数式(TeX記法)にも対応していますので、開発者などの情報共有にも利用できます。システムに関する情報を記しておくことで、社内ナレッジの共有と蓄積に役立ててください。

URL:NotePM – 社内wikiでナレッジ共有・マニュアル作成

Markdownで簡単にドキュメントを作れるツール「NotePM」
→今すぐ無料で使ってみる(1分で完了・クレカ登録不要)

 

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も生成されます。

URL:Mermaid Live Editor

Markdownで簡単にドキュメントを作れるツール「NotePM」
→今すぐ無料で使ってみる(1分で完了・クレカ登録不要)

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

Markdownで簡単にドキュメントを作れるツール「NotePM」

NotePM

NotePM(ノートピーエム) は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。

NotePMの特徴

  • マニュアル作成、バージョン管理、社外メンバー共有
  • 強力な検索機能。PDFやExcelの中身も全文検索
  • 社内FAQ・質問箱・社内ポータルとしても活用できる
  • 銀行、大学も導入している高度なセキュリティ。安全に情報共有できる

URL: https://notepm.jp/

NotePMについて詳しく見る >