DiagramNote is a premium, high-performance, single-page Markdown and Mermaid.js v11 diagramming editor. Built with a sleek glassmorphic theme supporting dark and light modes, it auto-saves drafts locally and provides a live preview as you type.
- Mermaid.js v11 Support: Easily draft diagrams (Flowcharts, Sequences, Mindmaps, Gantt charts, class structures, state graphs, and entity relationships) with live dynamic updates via
mermaid.run(). - Theme-Aware Rendering: The Mermaid theme automatically synchronizes when toggling between dark and light modes.
- Debounced Live Preview: Editing triggers a 300ms debounced parser to maintain extremely fluid typing responsiveness.
- GitHub-Style Callouts: Native post-processed blockquote rendering for alert boxes (
[!NOTE],[!TIP],[!IMPORTANT],[!WARNING], and[!CAUTION]) using official Octicon inline SVGs. - Robust Editor Control: Includes line numbering, Tab key insertion support, formatting toolbars, auto-scrolling synchronization, and full responsive splits.
- Local Persistence: Full draft saving via
localStoragecycles and quick template insertions. - Flexible Exporting: Downloader supports raw Markdown (
.md), styled standalone HTML (.html), and PDF printing layouts.
- Make sure you have Node.js installed.
- In your terminal, navigate to the project directory:
cd /Users/ayushchaudhary/Projects/DiagramNote - Install the dev dependencies (Vite) by running:
npm install
- Start the local server:
npm run dev
- Open the printed URL (typically
http://localhost:5173) in your browser to experience the application.
- index.html: Semantic HTML structure of the workspace.
- styles.css: Complete custom styling and glassmorphic UI tokens.
- app.js: Application module handling markdown compilation, mermaid runner, debounce filters, and localStorage state.
- templates.js: Pre-defined diagrams collection.
- package.json: Dev tooling and start scripts configuration.