Mermaid Smart Editor

Vue 3 + TypeScript Mermaid visual editor. It provides a ready-to-use editor shell for upstream apps, plus lower-level viewer/panel components for custom integrations.

一款基于 Vue 3 + TypeScript 的 Mermaid 可视化编辑组件。上游应用可以直接使用内置工具栏的完整编辑器，也可以按需组合底层组件。

Install

npm install mermaid-smart-editor mermaid vue

vue and mermaid are peer dependencies. If your app already installs them, install only mermaid-smart-editor.

Upstream App Usage

Use MermaidSmartEditor when you want the component to work with minimal wiring. It includes:

• left code editor with a default textarea
• right visual Mermaid preview/editor
• top toolbar for zoom, fit, reset, copy source, export SVG, export PNG
• contextual edit toolbars for supported diagrams

<script setup lang="ts">
import { ref } from 'vue'
import { MermaidSmartEditor } from 'mermaid-smart-editor'
import 'mermaid-smart-editor/style.css'

const code = ref(`graph TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship]
  B -->|No| D[Fix]
`)
</script>

<template>
  <MermaidSmartEditor v-model:code="code" height="640px" />
</template>

The CSS import is required because the library build emits component styles as mermaid-smart-editor/style.css.

Props

| Prop | Type | Default | Description | |---|---:|---:|---| | code | string | required | Mermaid source. Use v-model:code. | | height | string | 100vh | Root editor height. | | title | string | Mermaid 编辑器 | Header title text. | | defaultEditorWidth | number | 420 | Initial code editor width in px. | | showToolbar | boolean | true | Show the built-in top toolbar. | | showTitle | boolean | true | Show the header title area. | | showZoomControls | boolean | true | Show zoom/fit/reset controls. | | showCopy | boolean | true | Show copy source control. | | showExport | boolean | true | Show SVG/PNG export controls. |

Exposed Methods

<script setup lang="ts">
import { ref } from 'vue'
import { MermaidSmartEditor } from 'mermaid-smart-editor'

const code = ref('graph TD\n  A --> B')
const editorRef = ref<InstanceType<typeof MermaidSmartEditor> | null>(null)

function exportPng() {
  editorRef.value?.exportPng()
}
</script>

<template>
  <MermaidSmartEditor ref="editorRef" v-model:code="code" />
</template>

Available methods:

| Method | Description | |---|---| | getValue() | Return current Mermaid source. | | setValue(code) | Replace current Mermaid source. | | zoomIn() / zoomOut() | Zoom the diagram. | | fitView() | Fit diagram into the viewport. | | resetView() | Reset pan/zoom state. | | copySource() | Copy Mermaid source to clipboard. | | exportSvg() / exportPng() | Download current diagram. |

Custom Editor Or Toolbar

MermaidSmartEditor keeps useful slots for app-level customization:

<MermaidSmartEditor v-model:code="code">
  <template #editor="{ code, onUpdate }">
    <MyCodeEditor :code="code" @update:code="onUpdate" />
  </template>

  <template #toolbar-end="{ actions }">
    <button type="button" @click="actions.exportPng()">Export PNG</button>
  </template>
</MermaidSmartEditor>

If you need to own the whole page chrome, use the lower-level MermaidEditorPanel and build your toolbar around its exposed methods:

<script setup lang="ts">
import { ref } from 'vue'
import { MermaidEditorPanel } from 'mermaid-smart-editor'
import 'mermaid-smart-editor/style.css'

const panelRef = ref<InstanceType<typeof MermaidEditorPanel> | null>(null)
</script>

<template>
  <button type="button" @click="panelRef?.fitView()">Fit</button>
  <MermaidEditorPanel ref="panelRef" v-model:code="code" />
</template>

Editable Diagram Types

Editable viewers are currently implemented for:

• flowchart: graph LR, graph TD, flowchart
• sequence: sequenceDiagram

Other Mermaid diagram types render through the read-only fallback viewer.

Development

npm install
npm run dev
npm run type-check
npm run build

The local dev server uses http://localhost:5178.

Project Structure

src/
├── MermaidSmartEditor.vue      # Ready-to-use editor shell with toolbar
├── MermaidEditorPanel.vue      # Lower-level editor + viewer panel
├── diagrams/
│   ├── registry.ts             # Diagram type to viewer mapping
│   ├── flowchart/
│   │   ├── FlowchartViewer.vue
│   │   ├── parser.ts
│   │   ├── annotator.ts
│   │   ├── modifier.ts
│   │   └── toolbars/
│   ├── sequence/
│   │   ├── SequenceViewer.vue
│   │   ├── parser.ts
│   │   ├── modifier.ts
│   │   └── toolbars/
│   └── readonly/
└── shared/
    └── mermaidRenderer.ts

License

MIT