Mermaid Design

Changelog

Track the latest updates and improvements for mermaid.design.

v0.2.0

Features

  • Render Config Panel: A new Config tab in the theme panel exposes 400+ Mermaid render options in 33 groups organized by diagram type — layout, spacing, sizing, fonts, and behavior switches — with search, live preview, per-field reset, and local persistence. The group matching your current diagram type opens automatically
  • Config-Aware Export: Copy JSON, copy frontmatter, and the Export dialog’s theme download now include your render config overrides, ready to paste into mermaid.initialize() or Mermaid frontmatter

Improvements

  • Form controls on shadcn/ui: All buttons, inputs, selects, switches, and sliders are rebuilt on Radix primitives — same compact look, plus proper keyboard navigation and accessibility

v0.1.0

Features

  • Online Mermaid Editor: Three-pane workbench with a Monaco code editor (Mermaid syntax highlighting, inline error markers), live preview with pan/zoom, and a theme panel
  • Official SVG Rendering: Standard Mermaid SVG output with 400ms debounce, last-good-render fallback on syntax errors, and canvas background options (dots / white / checker)
  • ASCII Rendering: Convert diagrams to text art with Unicode or plain ASCII charsets and adjustable font size, powered by beautiful-mermaid
  • Theme System: 70+ editable theme variables, 11 built-in Mermaid themes plus designer presets, and seed-color theme generation (light & dark)
  • Template Gallery: Built-in templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, and more — with type filters and per-mode support filtering
  • Export: Download diagrams as SVG, PNG, JPG, or WebP at 1x/2x/4x resolution with optional transparent background; TXT export in ASCII mode; theme config export as JSON or Mermaid frontmatter
  • Import Theme: Paste theme JSON or frontmatter to import custom themes
  • Auto-Save: Code, theme, and layout persist in local storage between sessions
  • Internationalization: Full UI in 9 languages — English, 中文, Русский, 日本語, Français, 한국어, Español, Deutsch, Português
  • Client-Side Only: Everything runs in your browser — no uploads, no accounts, no tracking of your diagram data