Mermaid Renderer

Mermaid is one of those tools that quietly became infrastructure for technical writing. It's a JavaScript library that takes a small diagram-description language as input and outputs SVG diagrams. The syntax is deliberately minimal — `A --> B` is a flowchart arrow; `User->>Server: Login` is a sequence diagram message — and the layout is computed automatically by a built-in graph layout engine. The combination means you can write diagrams in plain text alongside your code, version-control the source, and re-render whenever the underlying system changes. No more "the architecture diagram is out of date because nobody updates the Visio file."

GitHub renders Mermaid in Markdown files since 2022. GitLab renders it in MRs and wikis. Notion, Obsidian, HackMD, Coda, Slab, and most modern technical documentation tools support it natively. The popularity has spawned an entire ecosystem of Mermaid-enabled tooling: VS Code preview extensions, Storybook integrations, static site generator plugins for every framework. The format won the "diagram as code" niche.

This tool gives you a standalone Mermaid renderer with three things the in-browser embeds don't always provide: **SVG/PNG export** (sometimes you need the diagram outside the markdown context), **a fast iteration loop** (paste, render, edit, re-render in a few seconds), and **a privacy guarantee** (the diagram source never leaves your tab, which matters when your diagram describes internal infrastructure).

**Supported diagram types**:

- **Flowchart** — boxes-and-arrows process flows. The most common Mermaid diagram type and the easiest to learn. - **Sequence diagram** — actors and messages over time. Used for API call flows, authentication flows, anything where the order of events matters. - **Class diagram** — object-oriented design notation. Useful for UML-style modeling. - **State diagram** — states and transitions. State machines, workflow states, finite-state systems. - **ER diagram** — entity-relationship for database schemas. Tables, relationships, cardinality. - **Gantt chart** — project timeline. Tasks with start dates and durations. - **User journey** — emotional arc of a user flow. Useful for product design discussions. - **Git graph** — branch / merge visualization. - **Pie chart** — basic data viz. (Mermaid is not a charting tool, but pie works for simple breakdowns.) - **Requirement diagram, mindmap, timeline, quadrant chart** — newer additions.

The 'Load example' dropdown demonstrates the six most-used. For exotic types, the Mermaid documentation (mermaid.js.org) has full syntax reference.

**Themes**. Four built-in themes: default (light, blue/gray), dark (light text on dark background), forest (green/earth tones), neutral (grayscale). The theme affects colors, fonts, and some spacing. Theme changes re-render automatically. For complete custom styling, Mermaid supports CSS class hooks (`classDef` and class assignments in the source) — those work in this tool but require knowing the Mermaid syntax.

**Performance**. Mermaid is roughly 1 MB compressed — it includes the parser, the layout engine, the rendering code, theme variants, and font metrics. We lazy-load it on the first Render click, so visitors who don't use the tool don't pay the cost. The library caches in your browser for the rest of the session; subsequent renders are quick (typically under 200 ms for typical diagrams).

**Export options**:

- **Copy SVG markup** — paste directly into HTML or another tool. - **Download SVG** — a standalone file. Useful for embedding in documents that support SVG (Word with the right export, Google Docs via Insert → Drawing, modern Markdown). - **Download PNG (2× resolution)** — for contexts that don't accept SVG (some older systems, some image-only paste targets). The 2× scale ensures it looks sharp on retina displays.

**Security**. We configure Mermaid with `securityLevel: 'strict'`, which removes script tags from any text labels in your diagram. A diagram with a label like `<script>alert('hi')</script>` renders as literal text — no script execution. This makes the rendered SVG safe to embed in your own pages. For untrusted Mermaid source (letting strangers submit diagrams), additional sanitization on the output is still recommended; the `sandbox` security level (renders inside an iframe) is the highest-protection option.

**Privacy**. Mermaid runs as JavaScript in your browser. Your diagram source stays in your tab during editing and rendering. The SVG output is generated locally; the PNG export uses a canvas conversion that also runs locally. Network panel stays empty during render. The only network traffic is the one-time fetch of the Mermaid library on first use, which is a public library identical for every visitor. The contents of your diagrams — internal architecture, infrastructure, processes — never leave your machine.

**Common syntax gotchas** that the parser will trip on:

- **Reserved words as node IDs**: `end`, `subgraph`, `participant` and others can't be used as IDs in some diagram types. Use a different name. - **Special characters in labels**: square brackets, pipe characters, and quotation marks inside node labels need escaping or wrapping in quotes. - **Indentation matters in some diagram types**: state diagrams and class diagrams want specific indentation for nested structures. - **Comments use `%%`**: not `//` or `#`.

**Edge cases handled**: the textarea preserves your source even if rendering fails (you don't lose work); render errors show the parser's message in the preview area rather than crashing; rapid re-renders during typing are debounced to use only the latest source (no flicker from stale renders); the URL.createObjectURL lifecycle is properly cleaned up after each download.