Zero dependencies. 16.8KB gzipped.
Diagrams that don't bloat your bundle
Ultra-lightweight Mermaid rendering engine. Parse, lay out, and render 8 diagram types with a synchronous API, 32 themes, and full interactivity.
Why switch
125x lighter than mermaid.js
Same diagrams, fraction of the size. No dependencies, no async, no bloat.
Interactive
Live Playground
Edit the source and watch it render live — or hit play to animate it step by step.
Features
Everything you need, nothing you don't
Built from scratch. Every byte justified.
Zero Dependencies
No dagre, no d3, no external packages. Pure TypeScript from parser to renderer.
Synchronous API
render() returns a string. No promises, no callbacks, no async/await ceremony.
8 Diagram Types
Flowchart, sequence, class, ER, state, pie, gantt, and mindmap. Extensible via plugins.
32 Themes
Tokyo Night, Catppuccin, Dracula, Nord, One Hunter, and 27 more. CSS custom properties.
Interactive
Zoom, pan, keyboard navigation, Cmd+F search, hover tooltips, minimap, and click events.
Extensible
Plugin system for custom diagram types, node shapes, and themes. use() to register.
Architecture
Clean pipeline, zero magic
Each step is a separate package. Use the umbrella or pick only what you need.
Usage
Simple API, powerful output
From SSR to browser interactivity to terminal rendering, one consistent API.
import { render } from "@crafter/mermaid";
const svg = render(`
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Success]
B -->|No| D[Failure]
`);
document.getElementById("diagram").innerHTML = svg;Packages
7 packages, one ecosystem
Use the umbrella or pick only what you need. Tree-shakeable, independently versioned.
@crafter/mermaid@crafter/mermaid-parser@crafter/mermaid-layout@crafter/mermaid-renderer@crafter/mermaid-themes@crafter/mermaid-cli@crafter/mermaid-playerReady to ship lighter diagrams?
Install in seconds. Start rendering in milliseconds.
MIT Licensed. Built by Crafter Station