Mermaid Editor is vscode extension inspired by official mermaid live editor to provide the following features:

• Live edit .mmd file with mermaid.js diagram
• Generate image file from .mmd file with preferred format (png, jpg, webp and svg).

The extension is activated when opening .mmd file.

• Select Mermaid:Preview mermaid from context menu or command palette
• Click Mermaid:Preview diagram icon at right corner
• ctrl+alt+[ on .mmd file

Generate command is only available when .mmd file is opened and live preview is activated.

• Select Mermaid:Generate image from context menu or command palette
• Click Mermaid:Generate image icon
• ctrl+alt+] on .mmd file

Zoom in/out is supported for live preview.

• Select Mermaid:Zoom in, Mermaid:Zoom out, Mermaid:Reset zoom, Mermaid:Zoom to specific scale from command palette
• Click Mermaid:Zoom in, Mermaid:Zoom out icon focusing live preview panel
• Zoom out: ctrl+alt+-
• Zoom in: ctrl+alt+=
• Reset zoom: ctrl+alt+0

This extension supports attribute to specify preferred configuration for each .mmd file. The attribute have to be described in comment of mermaid syntax.

Each .mmd file can be associated with mermaid configuration. With this attribute, .mmd file can read specified configuration. path_to_config have to be described as relative path to the config json file from associated .mmd file. If this attribute is not provided, default config file setting up in mermaid-editor.preview.defaultMermaidConfig is applied.

sequenceDiagram
%% @config{./path/to/config.json}
    Alice->>John: Hello John, how are you?

Each .mmd file can be associated with preferred background color. With this attribute, .mmd can read specifed background color with CSS style property format.If this attribute is not provided, default background color setting up in mermaid-editor.preview.backgroundColor is applied. The followings are example.

sequenceDiagram
%% @backgroundColor{red}
    Alice->>John: Hello John, how are you?

sequenceDiagram
%% @backgroundColor{#ff0000}
    Alice->>John: Hello John, how are you?

sequenceDiagram
%% @backgroundColor{rgb(255, 0, 0)}
    Alice->>John: Hello John, how are you?

Settings for look & feel in preview or image generator.

This extension uses Feather icon set under CC BY 3.0