VSCodeとChrome拡張「Mermaid Graphical Editor」をつくってみた

※2022.11.07追記：
　VSCode版は、現在VSCodeのバージョンが1.73では正常に動作しないことが確認されました。
　原因は究明中ですので、試用したい方は1.72以前のバージョンでお試しください。 VSCode版バージョン0.1.3で対応しました

チェンジビジョン 藤元です。
ご存知の方も多いと思いますが、GithubではIssueも含むMarkdown上でMermaidによる図の表示が可能です。
テキストで軽快に作図できる嬉しさの反面、描きたい図のイメージを頭の中でテキストに変換しなければならず、直感的に扱うには慣れが必要でした。

どうにか「”描きたいイメージ”と”Mermaidテキスト”とのギャップ」を埋めることができないか？
どうにか「Github上で手軽に使える」ことで普段からモデルを利用し易くすることができないか？
と、僕が考えて試しに作ってみたものが、今回ご紹介する「Mermaid Graphical Editor」です。

「Mermaid Graphical Editor」とは？

• テキスト(mermaid)形式の記述から、グラフィカルに表示・編集できるエディタビューを表示
• VSCodeとGoogle Chromeで使えます
• フローチャートの基本的な編集に対応
  • GUI編集で対応していない記述は、テキストを編集することでダイアグラムにリアルタイムに反映
• シーケンス図の基本的な編集に対応（2023.04.20時点）

■インストール

※2022.11.07追記：
　VSCode版は、現在VSCodeのバージョンが1.73では正常に動作しないことが確認されました。
　原因は究明中ですので、試用したい方は1.72以前のバージョンでお試しください。 VSCode版バージョン0.1.3で対応しました

※2022.11.09：
　Chrome版の名称を「Mermaid Graphical Editor」に統一しました。（旧名：Mermaid Editor）

「Mermaid Graphical Editor」は、それぞれMarketplaceで公開中です。ぜひインストールしてお試しください。
VSCode版は「Mermaid Graphical Editor」、Chrome版も「Mermaid Graphical Editor」の名前で登録しています。

■VSCodeでつかう

はじめかた

拡張をインストール後、Markdown ファイル(.md)内の Mermaid コードブロック上部の `MermaidEditor` をクリックすることでエディタビューが開きます。

利用を終える場合は、エディタビューを閉じるか、編集中コードブロック上部の `MermaidEditor` をクリックします。
また、編集中コードブロック以外が編集された場合もエディタビューが閉じるので、必要に応じて再度エディタビューを開いてください。

■Chromeでつかう

インストール後、拡張機能から呼び出すことでサイドバーのようにエディタビューが開きます。

もう一度、拡張機能から呼び出すことでエディタビューが閉じます。

エディタビューの操作方法

①メインメニュー

基本的な編集内容を選択します。

左から、ノード追加(変更)、リンク追加(変更)、テキスト編集、削除

②サブメニュー

基本的な編集内容に応じて、詳細な内容を選択します。

上の段から、ノード形状の選択、リンク形状の選択、追加モード／変更モードの選択

③エディットポイント

それぞれのアイコンをクリックすることで、メインメニュー／サブメニューで選択されている内容をテキストに反映します。必要に応じてテキスト入力欄が表示されます。テキスト入力欄ではShift + Enterで改行することができます。

ぜひお試しください！！