Apps/Developer tools

Mermaid Live Editor

Installation & details

Installation and usage

A local text-to-diagram editor with Mermaid syntax, diagram examples, pan and zoom, history, themes and image export.

The CLI installs the complete compiled editor locally, including static files in public/podie-apps. The ZIP contains the editable Svelte project; use Node 24 and npm or pnpm 10.34.6. Diagrams render locally. External documentation and optional Gist import use the network. Platform preview storage is temporary; an installed standalone app keeps browser history.

01 — Initialize shadcn

pnpm dlx shadcn@latest init

02 — Install the source

pnpm dlx shadcn@latest add https://podie.dev/framework-registry/mermaid-live-editor.json

03 — Add it to your page

import { MermaidLiveEditor } from '@/components/apps/mermaid-live-editor';

export default function Page() {
  return <MermaidLiveEditor />;
}

Included

Editable Mermaid source with syntax highlighting
Flowcharts, sequence diagrams, mindmaps and many more diagram types
Pan, zoom, themes, browser history and SVG/PNG export
Complete Svelte source project with a React integration entry

The ZIP includes the complete project, setup notes and upstream files and provenance in .podie. Extract it, run npm install, then npm run dev. The component installer adds a scoped React entry point to an existing project.

Source and attribution

Created by Mermaid. Original source. MIT notices are retained. Source revision: b3c0ebd325c030b0f567aba0c54b66ba8f3218c1.