※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で使えます
- フローチャートの基本的な編集に対応（2022.11.01時点）
- GUI編集で対応していない記述は、テキストを編集することでダイアグラムにリアルタイムに反映
■インストール
※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で改行することができます。
ぜひお試しください！！
astah in 5 min 