GraphViewer

🎨 Modern All-in-One Diagram Visualization Tool

Supporting 16+ diagram engines with hybrid local/remote rendering

English | 简体中文

🚀 Live Demo • 📖 Documentation • 📝 Changelog

---

Table of Contents

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

---

🎯 Why GraphViewer?

Feature	GraphViewer	Traditional Tools
Rendering Speed	⚡ Local WASM (0ms latency)	☁️ Always remote
Privacy	🔒 Code never leaves your browser	⚠️ Sent to servers
Engine Support	16+ with unified interface	Usually 3-5
Share Size	~100 bytes (LZ-compressed URL)	Large files or external links
Offline Support	✅ Full offline for local engines	❌ Requires internet

📸 Screenshots

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

🎬 Quick Demo

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]

Loading

✨ Key Features

• 🚀 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

🚀 Quick Start

System Requirements

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

Installation

# 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.

Environment Configuration (Optional)

Copy .env.example to .env to customize:

cp .env.example .env

Variable	Description	Default
KROKI_BASE_URL	Kroki rendering service URL	https://kroki.io
KROKI_ALLOW_CLIENT_BASE_URL	Allow client-specified Kroki URL (security risk)	false
PORT	Server port	3000

🎯 30-Second Demo

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

Loading

🔧 Supported Engines

Local Rendering (Fast & Private)

Engine	Category	Description
Mermaid	General	Flowcharts, sequence diagrams, Gantt charts, and more
Graphviz	Graph	Graph visualization with multiple layout engines

Remote Rendering (via Kroki)

Engine	Category	Description
PlantUML	General	UML diagrams, mind maps, WBS
D2	General	Modern declarative diagramming

+ 12 more engines: See full list →

🚢 Deployment

Docker (Recommended)

# 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

Profile	Purpose
prod	Production web server
kroki	Self-hosted Kroki rendering service
dev	Development environment with hot reload

GitHub Pages

npm run build:static

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

🛠️ Development

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

🏗️ Architecture

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

See Architecture Documentation for details.

🔒 Security

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.

📚 Documentation

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

🗺️ Roadmap

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

🤝 Contributing

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

📄 License

MIT License

🙏 Acknowledgments

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

---

Made with ❤️ by the GraphViewer team