Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Mermaid Graphical EditorNew to Visual Studio Code? Get it now.

Mermaid Graphical Editor

corschenzi

|
1,290 installs
| (1) | Free
GUI support for editing Mermaid(But Now, Support Flowchart And Sequence Only).
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Mermaid Graphical Editor

Mermaid の編集を GUI サポートするエディタビューを表示することができます。現在、フローチャートとシーケンス図の一部の編集のみ GUI サポートに対応しています。

GUI サポートで対応していない記述(フローチャートの Direction や Subgraphs など)は、Mermaid コードの方を直接編集することで反映されます。

You can display an editor view with GUI support for Mermaid editing. Currently, GUI support is supported only for editing some parts of the flowchart and sequence.

Descriptions not supported by GUI support (e.g., Direction and Subgraphs in flowcharts) will be reflected by editing the Mermaid code directly.

demo

Usage

Start

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

Click MermaidEditor at the top of the Mermaid code block in the Markdown file (.md) to open the editor view.

start

End

エディタビューを閉じるか、編集中コードブロック上部の MermaidEditor をクリックします。

また、編集中コードブロック以外が編集された場合もエディタビューが閉じるので、必要に応じて再度エディタビューを開いてください。

Close the Editor view or click MermaidEditor at the top of the code block you are editing.

Also, if something other than the code block being edited is edited, the editor view will close, so please reopen the editor view if necessary.

Release Notes

0.2.4

  • [フローチャート] ノードの選択時、形状変更に関連する編集ポイントを追加した。

  • [シーケンス図] 左側ノートの追加に対応した。

  • [Flowchart] When selecting a node, added edit points related to changing the shape.

  • [Sequence] Added support for adding notes on the left.

0.2.3

  • [シーケンス図] メッセージの選択時、形状変更に関連する編集ポイントを追加した。

  • [Sequence] When selecting a message, added edit points related to changing the shape.

0.2.2

  • [シーケンス図] ライフラインの選択時、メッセージ作成に関連する編集ポイントを追加した。

  • [シーケンス図] メッセージ、ノートを選択することで関連する編集ポイントを表示する機能を追加した。

  • [Sequence] When selecting a lifeline, added edit points related to message creation.

  • [Sequence] Added the ability to display related edit points by selecting messages and notes.

0.2.1

  • [シーケンス図] ライフラインに活性区間がある場合に、ライフラインを正常に削除できない不具合に対応した。

  • [シーケンス図] ライフラインを選択することで関連する編集ポイントを表示する機能を追加した。

  • [Sequence] Fixed a bug that prevented lifelines from being deleted if the lifeline has an active section.

  • [Sequence] Added the ability to display related edit points by selecting a lifeline.

0.2.0

  • シーケンス図の簡易的な編集に対応した。

    • ライフラインの追加、削除、テキスト編集
    • メッセージの追加、削除、テキスト編集
    • ノートの追加、削除、テキスト編集
  • Added support for simple editing of sequence diagrams.

    • Lifeline: Add, delete, and edit
    • Message: Add, delete, and edit
    • Note: Add, delete, and edit

0.1.7

  • ノードを選択することで関連する編集ポイントを表示する機能を追加した。

  • 英文入力時にコードが見辛くなるため、スペース文字をエスケープの対象から除外した。

  • その他の英文を使用する際に発生する不具合に対応した。

  • Added the ability to display related edit points by selecting a node.

  • If the space character is escaped, the Mermaid code becomes difficult to see when dealing with English text, so the space character is excluded from the escape target.

  • Addressed other problems that occurred when using English text.

0.1.5

subgroup 内要素への編集ポイントの位置がズレる不具合に対応した

Fixed a bug that misaligned the position of edit points to elements in subgroups.

0.1.4

ノードを編集(テキスト変更、シェイプ変更)すると、:::演算子が消えてしまう不具合に対応した

Addressed a bug that ::: operator disappears when the node is edited (text change, shape change).

0.1.3

VSCode 1.73 でエディタビューが正常に表示されない不具合に対応した

0.1.2

ダークモードへの対応 (配色テーマがダークの場合、エディタビューでのプレビュー表示の theme を"dark"にする)

0.1.0

フローチャートの簡易的な編集に対応

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft