🎨 Modern All-in-One Diagram Visualization Tool

Supporting 16+ diagram engines with hybrid local/remote rendering

Version License CI Pages Deploy Lighthouse Next.js React

English | 简体中文

🚀 Live Demo • 📖 Documentation • 📝 Changelog

• Why GraphViewer?
• Screenshots
• Key Features
• Quick Start
• Supported Engines
• Deployment
• Development
• Architecture
• Security
• Documentation
• Roadmap
• Contributing
• License

GraphViewer editor and live preview interface

Modern interface with live preview, multi-engine support, and one-click export

graph TD
 A[Write Code] --> B{Engine}
 B -->|Mermaid| C[Local WASM]
 B -->|PlantUML| D[Kroki Remote]
 B -->|Graphviz| C
 C --> E[SVG Preview]
 D --> E
 E --> F[Export]
 E --> G[Share URL]

• 🚀 16+ Diagram Engines: Mermaid, PlantUML, Graphviz, D2, Vega, Vega-Lite, and more
• ⚡ Hybrid Rendering: Local WASM (fast, privacy-friendly) + Remote Kroki (broad support)
• 📤 Multiple Exports: SVG, PNG (2x/4x), PDF, HTML, Markdown, source code
• 🔗 Instant Sharing: LZ-string compressed URLs for easy diagram sharing
• 💾 Multi-Diagram Workspace: Local persistence with version history
• 🤖 AI Assistant: Optional AI-powered code analysis and generation
• 👁️ Real-time Preview: Debounced live preview with manual render option

• Node.js >= 20.0.0
• npm >= 10.0.0

# Clone the repository
git clone https://github.com/LessUp/graph-viewer.git
cd graph-viewer
# Install dependencies
npm install
# Start development server
npm run dev

Visit http://localhost:3000.

Copy .env.example to .env to customize:

cp .env.example .env

Paste this Mermaid code into the editor to see GraphViewer in action:

flowchart TD
 Start([Start]) --> Input[/Input Data/]
 Input --> Process{Process?}
 Process -->|Yes| Action1[Action 1]
 Process -->|No| Action2[Action 2]
 Action1 --> Output[/Output/]
 Action2 --> Output
 Output --> End([End])
 style Start fill:#4ade80
 style End fill:#f87171

+ 12 more engines: See full list →

# Production with public Kroki
docker compose --profile prod up -d
# Production with self-hosted Kroki (better privacy)
docker compose --profile prod --profile kroki up -d

npm run build:static

See the GitHub Pages Guide for static hosting and the Docker Guide for the full server mode.

npm run dev # Development server on port 3000
npm run build # Production build (with API routes)
npm run build:static # Static export for GitHub Pages
npm run start # Production server
# Code Quality
npm run test # Run unit tests (vitest)
npm run lint # ESLint check
npm run typecheck # TypeScript check
npm run format # Prettier format

User Input → Editor → Preview Engine
 ↓
 ┌──────────┴──────────┐
 ↓ ↓
 Local WASM Remote Kroki
 (Mermaid, (All other
 Graphviz) engines)
 ↓ ↓
 └──────────┬──────────┘
 ↓
 SVG/PNG/PDF Output

See Architecture Documentation for details.

GraphViewer implements multiple security layers:

• SVG sanitization with DOMPurify, strict Mermaid security level
• Input validation, request timeouts, and security headers

See Security Documentation for details.

• English Documentation
• 中文文档
• API Reference
• Contributing Guide

GraphViewer is in a stable finalization phase. The priority is reliability, documentation accuracy, and deployment clarity rather than adding broad new feature surfaces.

We welcome contributions! Please read our Contributing Guide and AI Agent Workflow before submitting changes.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

MIT License

Built with Mermaid, Kroki, CodeMirror, Next.js, and Graphviz WASM.

Made with ❤️ by the GraphViewer team