Graphmaid

A modern Mermaid diagram editor with live preview and an OLED-optimized dark theme.

Live Demo

Features

• Live Mermaid Rendering -- Edit Mermaid code and see diagrams update in real-time
• OLED Dark Mode -- True black background optimized for OLED displays
• Export Options -- Download diagrams as PNG, SVG, or copy to clipboard
• Sample Library -- Built-in collection of Mermaid diagram examples (Flowchart, Sequence, State, Class, ER, Gantt, Pie, Git, Mindmap, Architecture)
• Monaco Editor -- Full-featured code editor with syntax highlighting and Mermaid completions
• URL Sharing -- Pre-load diagrams via base64-encoded ?code= query parameter
• Zoom & Pan -- Mouse wheel zoom and drag-to-pan on the diagram viewer

Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS 4
• Monaco Editor
• Mermaid.js

Getting Started

git clone https://github.com/navopw/graphmaid.git
cd graphmaid
npm install
npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build
npm run preview   # preview the production build

URL Query Params

Pre-load a diagram by passing it as a base64-encoded code query parameter:

https://navopw.github.io/graphmaid/?code=<base64-encoded-mermaid>

Example:

# Encode your diagram
echo -n 'graph TD
  A --> B' | base64

# Then open:
# https://navopw.github.io/graphmaid/?code=Z3JhcGggVEQKICBBIC0tPiBC

Architecture

src/
  App.tsx                    # Root component — holds editor state, wires editor to viewer
  components/
    editor/                  # Monaco editor with custom Mermaid language support
    layout/                  # Header, SplitPane (draggable), ErrorPanel
    toolbar/                 # SampleSelector (portal dropdown), ExportMenu
    viewer/                  # MermaidDiagram — SVG viewer with zoom/pan/export
  hooks/
    useMermaidRender.ts      # Core render loop: debounce input → Mermaid render → error extraction
    useDebounce.ts           # Generic debounce hook
  lib/
    mermaid.ts               # Mermaid initialization and render wrapper
    export.ts                # SVG/PNG download and clipboard copy
  data/
    samples.ts               # Built-in sample diagrams

State is managed in App.tsx with no external state library. The UI is a draggable split pane with Monaco on the left and the SVG viewer on the right. Rendering is handled by the useMermaidRender hook which debounces input (500ms) before calling Mermaid.

Contributing

Contributions are welcome! See CONTRIBUTING.md for setup instructions and guidelines.

Acknowledgments

Built on top of Mermaid.js, Monaco Editor, and React.

License

MIT