A modern, web-based diagram editor powered by Mermaid.js. Create, edit, and export beautiful diagrams with a live preview and integrated code editor.
- Live Code Editor: Edit Mermaid diagrams with syntax highlighting using CodeMirror
- Real-time Preview: Instantly see your diagram changes rendered
- Multiple Export Formats: Download diagrams as SVG or PNG
- Clean Interface: Split-pane design with editor and preview side-by-side
- Error Handling: Clear error messages for invalid diagram syntax
- React 19 - UI framework
- Vite - Build tool and dev server
- Mermaid.js - Diagram rendering engine
- CodeMirror - Code editor component
- html-to-image - PNG export functionality
- Node.js (version 16 or higher recommended)
- npm or yarn
- Clone the repository:
git clone https://github.com/sandeepvashishtha/DiagramCraft.git
cd DiagramCraft- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
- Edit Diagrams: Use the code editor on the left to write or modify Mermaid diagram syntax
- Render: Click the "Render" button to preview your diagram
- Export: Download your diagram as SVG or PNG using the toolbar buttons
flowchart TB
A[Sensing Layer] --> B[Edge Layer]
B --> C[Communication Layer]
C --> D[Cloud Layer]
D --> E[Application Layer]
E --> B
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
DiagramCraft supports all Mermaid diagram types, including:
- Flowcharts
- Sequence Diagrams
- Class Diagrams
- State Diagrams
- Entity Relationship Diagrams
- User Journey
- Gantt Charts
- Pie Charts
- Git Graphs
- And more!
For diagram syntax, visit the Mermaid.js documentation.
This project is licensed under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.