Zero dependencies. 30.5KB gzipped.
Mermaid diagrams. Without the 2MB tax.
Drop-in Mermaid rendering at 30.5KB. Same diagram syntax, synchronous API, 32 themes — built from scratch with zero dependencies.
Side by side
2MB vs 16.8KB. You do the math.
Same diagram syntax. Same output. Everything else is smaller, faster, or just better.
Try it now
Edit. Render. Animate.
Type diagram syntax on the left, see the SVG on the right. Hit play to watch it build step by step.
Not smoke. Proof.
Every interaction. Live.
This isn't a screenshot. Toggle each feature and interact with the diagram below.
Toggle features above to interact with the diagram.
What you get
Everything you need, nothing you don't
Every feature 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.
How it works
Text in, SVG out
Three steps, three packages. Use the umbrella or import only what you need.
Parse
Regex-based parser turns Mermaid syntax into a typed AST with source spans for every node and edge.
@crafter/mermaid-parser~8KBLayout
Custom Sugiyama algorithm computes coordinates, edge routing, and layer assignment. No dagre, no d3.
@crafter/mermaid-layout~14KBRender
Positioned graph becomes an SVG string or DOM element. Supports themes, zoom, pan, and keyboard nav.
@crafter/mermaid-renderer~17KBUsage
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;Gallery
31 samples. Every one playable.
8 diagram types, each with a play button. Watch any diagram build itself step by step.
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Success]
B -->|No| D[Retry]
D --> BSimple top-down flowchart with decision branching.
graph LR
A[Rectangle] --> B(Rounded)
B --> C{Diamond}
C --> D((Circle))
D --> E([Stadium])
E --> F[[Subroutine]]All available node shapes: rectangle, rounded, diamond, circle, stadium, and more.
graph LR A --> B A -->|labeled| C B -.-> D C ==> E D -.->|dotted label| F
Solid, dotted, and thick edges with labels.
graph TB
subgraph Frontend
A[React App] --> B[API Client]
end
subgraph Backend
C[Express Server] --> D[(Database)]
end
B --> CGroup related nodes into named subgraphs for visual organization.
graph LR
A[Push] --> B[Build]
B --> C[Test]
C --> D{Pass?}
D -->|Yes| E[Stage]
D -->|No| F[Fix]
E --> G[Deploy]
F --> AContinuous integration pipeline from commit to production.
graph RL
A[End] --> B[Process]
B --> C[Start]
C --> D{Check}
D -->|OK| A
D -->|Fail| CTop-to-bottom, left-to-right, right-to-left, and bottom-to-top flows.
graph TD
A{Is it raining?}
A -->|Yes| B{Have umbrella?}
A -->|No| C[Go outside]
B -->|Yes| D[Walk with umbrella]
B -->|No| E{Urgent?}
E -->|Yes| F[Run]
E -->|No| G[Wait]Multi-level decision tree with multiple outcomes.
graph TD A[Client] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] B --> E[Order Service] D --> F[(User DB)] E --> G[(Order DB)] E --> H[Payment Service]
Microservices architecture with API gateway and service mesh.
sequenceDiagram participant C as Client participant S as Server participant D as Database C->>S: GET /api/users S->>D: SELECT * FROM users D-->>S: ResultSet S-->>C: 200 OK (JSON)
Request-response pattern between client and server.
sequenceDiagram participant A participant B A->B: Solid line A-->B: Dotted line A->>B: Solid arrow A-->>B: Dotted arrow B->>A: Response
All sequence diagram arrow types: solid, dotted, with and without arrowheads.
sequenceDiagram participant U as User participant A as App participant DB as Database U->>A: Login request activate A A->>DB: Verify credentials activate DB DB-->>A: Valid deactivate DB A-->>U: Token deactivate A
Show when participants are active processing requests.
sequenceDiagram
participant C as Client
participant S as Server
C->>S: Request
alt success
S-->>C: 200 OK
else error
S-->>C: 500 Error
end
loop Retry 3x
C->>S: Retry
endConditional, loop, and parallel execution blocks.
sequenceDiagram participant U as User participant A as App participant P as Auth Provider participant R as Resource U->>A: Login A->>P: Redirect to auth P->>U: Login form U->>P: Credentials P->>A: Auth code A->>P: Exchange code P-->>A: Access token A->>R: API call + token R-->>A: Protected data A-->>U: Dashboard
Authorization code flow with token exchange.
sequenceDiagram participant S as Server participant C as Cache S->>S: Validate input S->>C: Check cache C-->>S: Cache miss S->>S: Process request S->>C: Update cache C-->>S: OK
A participant sending a message to itself for internal processing.
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Admin {
+String role
+ban(user)
}
User <|-- AdminSimple class with attributes and methods.
classDiagram
class Account {
+String id
-String password
#int balance
~String internal
+getBalance() int
-hashPassword() String
}Public, private, protected, and package access modifiers.
classDiagram
Animal <|-- Dog
Animal <|-- Cat
Dog *-- Leg
Dog o-- Toy
Cat --> Mouse
class Animal {
+String name
+speak()
}Inheritance, composition, aggregation, and association.
classDiagram
class EventEmitter {
-Map listeners
+on(event, fn)
+emit(event, data)
+off(event, fn)
}
class Logger {
+handle(data)
}
class Analytics {
+handle(data)
}
EventEmitter o-- Logger
EventEmitter o-- AnalyticsObserver pattern with subject and listeners.
classDiagram
class Shape {
+int x
+int y
+area() float
+draw()
}
class Circle {
+int radius
+area() float
}
class Rectangle {
+int width
+int height
+area() float
}
Shape <|-- Circle
Shape <|-- RectangleMulti-level inheritance tree with abstract base class.
erDiagram
USER {
int id PK
string name
string email UK
}
ORDER {
int id PK
int user_id FK
date created_at
}
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : containsUsers and orders with one-to-many relationship.
erDiagram
PERSON {
int id PK
string name
}
ADDRESS {
int id PK
string street
string city
}
PASSPORT {
int id PK
string number UK
}
PERSON ||--o{ ADDRESS : lives_at
PERSON ||--|| PASSPORT : hasAll ER diagram cardinality types: one, many, zero-or-one, zero-or-more.
erDiagram
CUSTOMER {
int id PK
string name
string email UK
}
ORDER {
int id PK
int customer_id FK
date created_at
float total
}
PRODUCT {
int id PK
string name
float price
}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER_LINE : contains
ORDER_LINE }o--|| PRODUCT : referencesComplete e-commerce data model with customers, orders, and products.
erDiagram
AUTHOR {
int id PK
string name
string bio
}
POST {
int id PK
int author_id FK
string title
date published_at
}
AUTHOR ||--o{ POST : writes
POST ||--o{ COMMENT : has
POST }o--o{ TAG : tagged_withBlog platform with authors, posts, comments, and tags.
stateDiagram-v2 [*] --> Idle Idle --> Processing : start Processing --> Success : complete Processing --> Error : fail Error --> Idle : reset Success --> [*]
Simple state machine with transitions.
stateDiagram-v2 [*] --> Connecting Connecting --> Open : connected Connecting --> Closed : timeout Open --> Closing : disconnect Open --> Closed : error Closing --> Closed : done Closed --> Connecting : reconnect Closed --> [*]
WebSocket connection states from connecting to closed.
stateDiagram-v2 [*] --> Pending Pending --> Confirmed : payment Pending --> Cancelled : cancel Confirmed --> Shipped : ship Shipped --> Delivered : deliver Delivered --> [*] Cancelled --> [*]
E-commerce order state machine with cancellation and refunds.
stateDiagram-v2
[*] --> Idle
Idle --> Processing : submit
state Processing {
[*] --> Validate
Validate --> Transform : valid
Transform --> Save : done
Save --> [*]
}
Processing --> Success : complete
Processing --> Error : fail
Error --> Idle : retry
Success --> [*]Nested composite state with inner transitions.
pie title Languages Used "TypeScript" : 45 "Rust" : 25 "Go" : 15 "Python" : 10 "Other" : 5
Pie chart showing programming language usage percentages.
gantt
title Sprint 1
dateFormat YYYY-MM-DD
section Design
Wireframes :a1, 2025-01-01, 3d
UI Design :a2, after a1, 2d
section Dev
Frontend :b1, after a2, 5d
Backend :b2, after a2, 4d
section QA
Testing :c1, after b1, 3dTwo-week sprint with design, development, testing, and review phases.
mindmap
root((Web Dev))
Frontend
React
Vue
Svelte
Backend
Node.js
Deno
Bun
Database
PostgreSQL
RedisMind map of modern web development technologies.
mindmap
root((Project))
Phase 1
Research
Design
Prototype
Phase 2
Development
Testing
Review
Phase 3
Launch
MonitorMind map breaking down a project into phases and deliverables.
Install what you need
7 packages, pay for what you use
Need just the parser? Import it. Want everything? One umbrella package. Each one independently versioned.
@crafter/mermaid@crafter/mermaid-parser@crafter/mermaid-layout@crafter/mermaid-renderer@crafter/mermaid-themes@crafter/mermaid-cli@crafter/mermaid-playerDrop 2MB from your bundle today.
One command. Zero config. Diagrams rendering in under 1ms.
MIT Licensed. Built by Crafter Station