22+ diagram types from simple text DSL - Mind maps, flowcharts, ERD, architecture, wireframes and more. 100% client-side with drag & drop support.
npm install ddflow
22+ diagram types from simple text DSL
Mind maps • Flowcharts • ERD • Architecture • Wireframes • and more
Created by Durgesh Dandotiya (DD)
🎮 Live Playground •
Quick Start •
Diagram Types •
DSL Reference •
Discord

---
| Feature | Mermaid | DDFlow |
|---------|---------|--------|
| Diagram types | 13 | 22+ |
| Drag & drop nodes | ❌ | ✅ |
| Simple syntax | ❌ Complex | ✅ Intuitive |
| Interactive | ❌ Static | ✅ Pan/Zoom |
| Wireframes | ❌ | ✅ 35+ elements |
| Dark theme | Partial | ✅ Beautiful |
| Bundle size | ~200KB | ~50KB |
| Server required | Sometimes | Never |
DDFlow runs entirely in the browser. No server, no API calls, no data leaving your machine.
```
✅ DSL Parsing → Browser JavaScript
✅ Layout Engine → Client-side calculations
✅ Rendering → React + SVG
✅ Interactions → Mouse events + state
✅ Data → In-memory (React state)
---
`bash`
npm install ddflowor
yarn add ddflowor
pnpm add ddflow
`tsx
import { DDFlow } from 'ddflow';
function App() {
return (
source={
Project Plan
Research
Market Analysis
User Interviews
Design
Wireframes
Prototypes
Development
Frontend
Backend
}`
/>
);
}
`html
---
📊 Diagram Types
$3
`
Project
Goals
Revenue
Growth
Features
Auth
Dashboard
`
$3
`
[clients] Web, Mobile
[gateway] API Gateway
[services] Auth, Users
[databases] PostgreSQLWeb -> API Gateway
API Gateway -> Auth
`
$3
`
(start) Begin
Begin -> (decision) Valid?
Valid? -> (end) Success
Valid? -> (process) Retry
`
$3
`
participant Client, API, DBClient -> API: Request
API -> DB: Query
DB --> API: Result
API --> Client: Response
`
$3
`sql
CREATE TABLE users (
id UUID PRIMARY KEY,
email VARCHAR(255),
name VARCHAR(100)
);CREATE TABLE posts (
id UUID PRIMARY KEY,
user_id UUID REFERENCES users
);
`
$3
`
[actor] User
[page] Landing
[action] Sign Up
[page] DashboardUser -Visit-> Landing
Landing -Click-> Sign Up
Sign Up -Complete-> Dashboard
`
$3
`
(initial) IdleIdle -> Loading: FETCH
Loading -> Success: RESOLVE
Loading -> Error: REJECT
Error -> Idle: RETRY
`
$3
`
[Q1] *Kickoff | Started
[Q2] Design | Complete
[Q3] *MVP | Launched
[Q4] Scale | Growth
`
View all 22+ diagram types →
| Type | Description | Key Syntax |
|------|-------------|------------|
|
mindmap | Hierarchical mind maps | Indentation-based |
| architecture | System architecture | [layer] components |
| erd | Entity Relationship | SQL CREATE TABLE |
| flowchart | Process flows | (type) Label → |
| sequence | Sequence diagrams | A -> B: message |
| state | State machines | State -> State: event |
| journey | User journeys | [type] Node with connections |
| timeline | Timelines | [date] Event \| description |
| orgchart | Org charts | Indentation-based |
| network | Network topology | [device] Name (IP) |
| gantt | Gantt charts | Task, start, duration |
| deployment | Deployment diagrams | Nested [type] Name |
| pie | Pie charts | "Label": value |
| quadrant | Quadrant charts | Label: [x, y] |
| git | Git graphs | commit, branch, merge |
| wireframe | UI wireframes | 35+ element types |
| class | Class diagrams | class Name + members |
| activity | Activity diagrams | :Action; with decisions |
| usecase | Use case diagrams | actor + (use case) |
| component | Component diagrams | [component] Name |
| c4 | C4 diagrams | [person/system/container] |
| requirement | Requirements | requirement Name {...} |---
📱 Wireframe DSL
Build UI mockups with 35+ elements - perfect for rapid prototyping:
`
{App Title}
[[ Home | Products | About ]]>> Home > Dashboard
Welcome Back
(@John Doe)
[search: Search products...]
[v Select Category]
[slider: 65%]
|Name|Status|Amount|
|Order #1|Shipped|$120|
|Order #2|Pending|$85|
[progress: 78%]
[Submit] [Cancel] [Delete]
>
@user1 liked your post • 2m ago
@user2 commented: Great work!
{badge:New} {success:Active} {warning:Review}
`
View all wireframe elements →
| Category | Elements | Syntax |
|----------|----------|--------|
| Layout | Window, Card, Modal |
{Title}, , {{Modal}} |
| Navigation | Navbar, Tabs, Breadcrumbs | [[ a \| b ]], (( tab1 \| tab2 )), >> Home > Page |
| Forms | Input, Textarea, Dropdown, Search | "placeholder", [""" text], [v Options], [🔍 Search] |
| Controls | Button, Toggle, Checkbox, Radio | [Btn], [O] On, [x] Check, (O) Radio |
| Feedback | Progress, Alert, Badge, Rating | [progress: 75%], [!] Error, {success:Done}, [★★★☆☆] |
| Data | Table, List, Feed | \|a\|b\|, - item, @user text |
| Media | Image, Video, Map, Chart | [img], [video], [map], [chart] |
| Navigation | Stepper, Pagination | [step: 2/5], [page: 3/10] |---
🎮 Interactive Features
$3
Click and drag any node to reposition it. The layout adapts automatically.$3
- Scroll to zoom in/out
- Click + drag on empty space to pan
- Reset button to restore default view$3
`
┌─────────────────────────────────┐
│ [+] [-] [Fit] [Reset] 75% │
│ │
│ Drag nodes • Scroll to │
│ zoom • Drag canvas to pan │
└─────────────────────────────────┘
`---
🎨 Customization
$3
`tsx
type="mindmap"
source="..."
theme="dark" // 'dark' | 'light'
/>
`$3
`tsx
import { DDFlow, createTheme } from 'ddflow';const customTheme = createTheme({
colors: {
primary: '#8B5CF6',
secondary: '#0EA5E9',
success: '#10B981',
},
background: '#0f0f1a',
});
`$3
`tsx
import { DDFlow, useDDFlowState } from 'ddflow';function App() {
const { positions, setPositions, zoom, setZoom } = useDDFlowState();
return (
type="architecture"
source={source}
positions={positions}
onPositionChange={setPositions}
zoom={zoom}
onZoomChange={setZoom}
/>
);
}
`---
🔧 API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
type | DiagramType | required | Diagram type |
| source | string | - | DSL source text |
| data | object | - | Pre-parsed data |
| theme | 'dark' \| 'light' \| Theme | 'dark' | Color theme |
| width | string \| number | '100%' | Container width |
| height | string \| number | '100%' | Container height |
| className | string | - | CSS class |
| interactive | boolean | true | Enable drag/pan/zoom |
| onNodeClick | (node) => void | - | Node click handler |
| onPositionChange | (positions) => void | - | Position change handler |$3
`tsx
import { parsers } from 'ddflow';const mindmapData = parsers.mindmap(source);
const erdData = parsers.erd(sqlSource);
const flowData = parsers.flowchart(source);
const wireframeData = parsers.wireframe(source);
`$3
`tsx
import { exportToPNG, exportToSVG } from 'ddflow';// Export diagram
const png = await exportToPNG(diagramRef);
const svg = await exportToSVG(diagramRef);
`---
🤖 AI Integration
DDFlow provides exportable DSL references for AI-powered diagram generation. Use these with any LLM (GPT-4, Claude, etc.) to generate correct DSL.
$3
`tsx
import {
DSL_REFERENCE, // Complete DSL syntax documentation
AI_PROMPT_TEMPLATE, // Ready-to-use AI prompt
createAIPrompt, // Function to create prompts
getDSLForType, // Get syntax for specific type
getCompactReference // Shorter reference for token limits
} from 'ddflow';// Option 1: Use the complete AI prompt template
const prompt = AI_PROMPT_TEMPLATE.replace('{USER_INPUT}', 'Create an e-commerce architecture');
// Option 2: Create a custom prompt
const myPrompt = createAIPrompt('Draw a user authentication flowchart');
// Option 3: Get syntax for specific diagram type
const archSyntax = getDSLForType('architecture');
// Option 4: Use compact reference (for token-limited contexts)
const shortRef = getCompactReference();
`$3
`tsx
import { createAIPrompt, Parsers } from 'ddflow';async function generateDiagram(description) {
const prompt = createAIPrompt(description);
const response = await openai.chat.completions.create({
model: 'gpt-4',
messages: [{ role: 'user', content: prompt }]
});
const dsl = response.choices[0].message.content;
const type = dsl.match(//)?.[1] || 'flowchart';
const data = Parserstype;
return { type, data, dsl };
}
`$3
`
title: E-Commerce Platform
subtitle: Container Diagram[person] Customer: Online shopper
[external] Payment Gateway: Stripe
boundary "Web Layer" {
[webapp] Web App: React SPA
[mobileapp] Mobile App: React Native
}
boundary "Services" {
[service] User Service: Authentication
[service] Order Service: Order management
}
boundary "Data Layer" {
[database] PostgreSQL: Primary DB
[cache] Redis: Session cache
}
Customer -> Web App: Uses
Web App -> User Service: API calls
Order Service -> PostgreSQL: Writes
`---
📦 Individual Components
Import only what you need for smaller bundles:
`tsx
import { MindMap } from 'ddflow/mindmap';
import { Flowchart } from 'ddflow/flowchart';
import { ERD } from 'ddflow/erd';
import { Wireframe } from 'ddflow/wireframe';
import { Architecture } from 'ddflow/architecture';
`---
🌐 Framework Support
$3
`tsx
'use client';import dynamic from 'next/dynamic';
const DDFlow = dynamic(() => import('ddflow'), { ssr: false });
export default function Diagram({ source }) {
return ;
}
`$3
`html
`$3
`vue
`---
🛠️ Development
`bash
Clone
git clone https://github.com/ddflow/ddflow
cd ddflowInstall
npm installDev server
npm run devRun playground
npm run playgroundBuild
npm run buildTest
npm test
`---
📋 Roadmap
- [x] 22 diagram types
- [x] Drag & drop nodes
- [x] Pan & zoom
- [x] Dark theme
- [x] 100% client-side
- [ ] Light theme
- [ ] Export PNG/SVG/PDF
- [ ] Mermaid import
- [ ] VS Code extension
- [ ] Figma plugin
- [ ] AI diagram generation
- [ ] Real-time collaboration
---
🤝 Contributing
We welcome contributions! See CONTRIBUTING.md for guidelines.
`bash
Create feature branch
git checkout -b feature/amazing-featureMake changes & test
npm testSubmit PR
``---
- Discord - Chat with the community
- GitHub Discussions - Ask questions
- Twitter - Follow for updates
---
Durgesh Dandotiya (DD)
- GitHub: @durgeshdandotiya
- Twitter: @ddaborat
- Website: sdlc.dev
---
MIT © Durgesh Dandotiya
---
Built with ❤️ by DD (Durgesh Dandotiya)
Website •
Docs •
Playground •
GitHub