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

Mermaid Graphical Editor

corschenzi

|
39,623 installs
| (12) | Free
GUI support for editing Mermaid(But Now, Support Flowchart and Sequence diagram, Class diagram, ER diagram, and State diagram 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 サポートするエディタビューを表示することができます。現在、フローチャートとシーケンス図、クラス図、ER 図、ステート図の一部の編集のみ GUI サポートに対応しています。

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

You can display an editor view that supports Mermaid editing with a GUI. Currently, only some editing of flowcharts, sequence diagrams, class diagrams, ER diagrams and State diagrams is supported by GUI support.

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.5.3

  • [クラス図] クラス名に (スペース)が含まれている場合に、属性や操作が変更できない不具合を修正した。

  • [クラス図] クラス名に -(ハイフン) が含まれている場合に、選択できない不具合を修正した。

  • [Class Diagram] Fixed a bug where attributes and operations could not be modified if the class name contained a space ( ).

  • [Class Diagram] Fixed a bug where the class name containing a hyphen (-) could not be selected.

0.5.2

  • [ステート図] ::: 演算子が削除されてしまう不具合に対応した。

  • [State Diagram] Addressed the issue where the ::: operator was being removed.

0.5.1

  • [ステート図] 開始/終了状態が意図せず選択編集できていた不具合を修正した。

  • [State Diagram] Fixed a bug where the start/end state could be unintentionally selected for editing.

0.5.0

  • ステート 図の簡易的な編集に対応した。

    • ステートの追加、削除、テキスト編集
    • 遷移の追加、削除、テキスト編集
  • Added support for simple editing of State diagrams.

    • State: Add, delete, and edit
    • Transition: Add, delete, and edit

0.4.9

  • [フローチャート] アニメーションの速度を調整した。

  • [Flowchart] Adjusted the speed of the animation.

0.4.8

  • 画像コピーボタンが動作しなくなる不具合を修正した。

  • Fixed a bug that the image copy button does not work.

0.4.7

  • 縮尺スライドバーの色を少し調整した

  • Adjusted the color of the scale slide bar slightly.

0.4.6

  • 上部メニューにツールチップが表示されるように修正した。

  • Fixed so that tooltips are displayed in the top menu.

0.4.5

  • 編集中のコードブロック選択色を変更した。

  • Changed the color of the code block selection during editing.

0.4.4

  • AsciiDoc ドキュメント内での Mermaid コードブロックでも利用できるように変更した。

  • Enabled support for Mermaid code blocks within AsciiDoc documents.

0.4.3

  • [フローチャート] Direction で TD を指定するとフローチャート図として認識されなくなる不具合を修正しました。

  • [Flowchart] Fixed a bug where a diagram would not be recognized as a flowchart if TD was specified in Direction.

0.4.1

  • [ER 図] エンティティのフィールドを削除できない不具合を修正した。

    • フィールドを空欄にすることで削除できるようにした。
  • [ErDiagram] Fixed a bug that prevented deleting entity fields.

    • Fields can now be deleted by leaving them blank.

0.4.0

  • ER 図の簡易的な編集に対応した。

    • エンティティの追加、削除、テキスト編集
    • 関係線の追加、削除、テキスト編集
  • Added support for simple editing of ER diagrams.

    • Entity: Add, delete, and edit
    • Relationship: Add, delete, and edit

0.3.5

  • [クラス図] 削除モードで関連線の削除ができない不具合を修正した。

  • [ClassDiagram] Fixed a bug that relationships could not be deleted in delete mode.

0.3.4

  • [シーケンス図] ライフラインに指定されたラベルによっては、正常にライフラインを選択できなくなる不具合を修正した。

  • [Sequence] Fixed a bug that depending on the label specified in the lifeline, the lifeline could not be selected normally.

0.3.3

  • mermaid のバージョンを 10.9.1 に更新した。

  • [クラス図] Note が含まれているとテキスト編集ができなくなる不具合を修正した。

  • [クラス図] クラス名の編集の時に # が正しくエスケープされない不具合を修正した。

  • Updated mermaid version to 10.9.1

  • [ClassDiagram] Fixed a bug that text editing would not be possible if Note was included.

  • [ClassDiagram] Fixed a bug that # was not escaped correctly when editing the class name.

0.3.2

  • [フローチャート] flowchart の代わりに graph を使用できるようにした。

  • [Flowchart] Added support for using graph instead of flowchart.

0.3.1

  • 多重度が定義されている場合に発生する関連線のラベル編集の不具合を修正した

  • Fixed a bug in label editing for relationship that occurred when multiplicity was defined.

0.3.0

  • クラス図の簡易的な編集に対応した。

    • クラスの追加、削除、テキスト編集
    • 関係線の追加、削除、テキスト編集
  • Added support for simple editing of class diagrams.

    • Class: Add, delete, and edit
    • Relationship: Add, delete, and edit

0.2.12

  • 要素の選択に係わる不具合を修正した

  • Fixed a bug related to element selection.

0.2.11

  • [シーケンス図] Gouping / Box が存在する場合に生じるアクティベーション、フラグメント作成の不具合を修正した。

  • [sequence] Fixed Activation / Fragment creating bug that occur when Gouping / Box is present.

0.2.10

  • [シーケンス図] Creation が絡むアクティベーション、ノート作成の不具合を修正した。

  • [Sequence] Fixed a Activation / Note creating bug involving Actor Creation.

0.2.9

  • mermaid のバージョンを 10.6.1 に更新した。

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

  • Updated mermaid version to 10.6.1

  • [Sequence] Added support for simple editing of Grouping / Box.

0.2.8

  • [シーケンス図] アクティベーション(実行仕様)が絡むフラグメント編集の不具合を修正した。

  • [Sequence] Fixed a fragment editing bug involving Activations.

0.2.7

  • [シーケンス図] アクティベーション(実行仕様)に対応した。

  • [フローチャート] リンクを選択することで関連する編集ポイントを表示する機能を追加した。

  • ダブルクリックによるテキスト編集に対応した。

  • [Sequence] Added support for Activations.

  • [Flowchart] Added the ability to display related edit points by selecting links.

  • Added support for double-clicking text editing

0.2.6

  • [シーケンス図] フラグメントの簡易的な編集(追加、変更、削除、テキスト)に対応した。

  • [Sequence] Added support for simple editing of fragments (add, change, delete, text).

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
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft