Owen Mermaid

[!NOTE] Language: Owen Mermaid follows Obsidian by default: Korean uses Korean, while every other locale uses English. Override it from Settings → Owen Mermaid → Interface → Language.

Owen Mermaid is an Obsidian plugin for viewing and editing Mermaid SVG images inside your notes.

• Detects Mermaid SVG diagrams and adds an inline glass toolbar.
• Adds a Mermaid SVG right-click menu for zoom view, editing, PNG download, and JPG download.
• Provides a full-screen pan and zoom viewer.
• Includes a flowchart-focused visual editor for creating shapes, dragging nodes, editing text, creating/editing/deleting connectors, and writing changes back to the original Mermaid code block.
• Supports PNG/JPG download settings for save location, output folder, filename template, quality, background, and scale.
• Exports all rendered Mermaid SVG diagrams in the active note to a vault folder with an optional Markdown batch report.
• Provides a settings screen with section headers like the screenshot design.
• Supports mouse drag-and-drop Mermaid editing directly on the canvas, similar to working in Visio.
• Applies a liquid glass design tone inspired by Owen Graphite and Owen Editor.

Screenshots

Features

When adding new functionality, add a new row to this table so the current feature surface stays easy to scan.

Usage

1. Create a Mermaid code block in an Obsidian note.
2. View the note in Reading view or Live Preview.
3. Hover a rendered Mermaid diagram to use the inline buttons.
4. Right-click the Mermaid SVG to open zoom, edit, or download actions.
5. Run Export Mermaid diagrams in active note from the command palette to batch-export every rendered Mermaid SVG in the current note.

The visual editor currently targets common flowchart/graph Mermaid syntax: nodes, basic shapes, labels, and connectors. It also handles basic stateDiagram and sequenceDiagram structures. Mermaid init directives are preserved before the regenerated header, and unsupported lines or subgraph blocks are preserved in the generated output section when possible.

Mermaid Compatibility

Owen Mermaid keeps Mermaid source editable first and visual editing focused. Use this matrix to decide what should round-trip visually, what is preserved as source, and what may need direct source editing.

Keyboard shortcuts inside the editor:

• Ctrl/Cmd + Z: undo the last editor change.
• Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z: redo the last undone change.
• Enter: edit the selected node, connector, or free line text.
• Delete/Backspace: delete the selected item.
• Arrow keys: move the selected node or free line.
• Shift + arrow keys: move by the grid snap size.
• Shift/Ctrl/Cmd + click: add or remove nodes from the current multi-selection.
• Escape: cancel the active placement or connector tool.

Batch export notes:

• Batch export uses the configured image format, filename template, output folder, scale, background, and quality.
• Files are written to the vault output folder and automatically receive a numeric suffix instead of overwriting existing files.
• The batch report setting controls whether a Markdown report is written never, only on failures, or every time.

Development

npm install
npm run dev
npm run build
npm test

Release validation:

npm run release:check

Optional Obsidian smoke test:

Obsidian --remote-debugging-port=9222
npm run test:obsidian

The smoke test connects to the running Obsidian app over CDP, confirms that Owen Mermaid is enabled, checks command registration, creates a temporary Mermaid note, verifies the rendered SVG toolbar, opens the visual editor, and then removes the temporary note. Set OWEN_MERMAID_SMOKE_SKIP_UI=1 to run only the command-registration checks.

Manual install for testing:

<vault>/.obsidian/plugins/owen-mermaid/

Copy main.js, manifest.json, and styles.css into that folder, reload Obsidian, and enable Owen Mermaid from Community plugins.

Release Files

Community release assets should include:

• manifest.json
• main.js
• styles.css