Visual logic, simplified. Diagramming at the speed of thought. Inspired by Mermaid/PlantUML online editors. Use of "Braun" design language
Graph Editor, main view with "Braun design language" style
Edit diagrams and schemas with real-time preview, clear design.
Graph Editor was born from a frustration with clunky GUI-based diagramming tools. It provides a focused environment where users can write Mermaid or PlantUML code and see high-fidelity SVG renders updated in real-time.
The application integrates the Monaco Editor — the same engine powering VS Code — to provide a familiar and powerful editing experience with syntax highlighting and intelligent indentation.
By decoupling the input from the rendering logic through an atomic state management layer, the editor remains fluid even when handling complex architectural diagrams with hundreds of nodes.
Timeline
Q1 · 2025
Scope
Editor UX
State Architecture
Rendering
Scale
Multi-idiom support
Instant preview
Stateless web application. No backend needed.
Optimized for feedback loops.
Originally created in React, the app was totally rewritten in Vue for simplicity and performance
Great performance of Pinia enables smooth flow of code → image
While lighter editors exist (even regular textarea), the Monaco Editor provides a professional feel that developers expect. Features like multi-cursor editing and advanced search/replace make it a “workstation” rather than a simple textarea.
Base64 encoded input + settings, allows for complete sharing experience without any backend
Supporting both Mermaid and PlantUML allows users to choose the best tool for the job — Mermaid for fast, beautiful web-native SVGs, and PlantUML for more traditional, complex enterprise diagrams.
A picture is worth a thousand lines of code
The sketchpad refined.
Graph Editor has become an essential tool for documenting complex systems quickly and brainstorming architectures. The combination of a high-fidelity editor and instant visual feedback reduces the friction between having a thought and seeing it mapped out.
Impact
Instant visualization
Sharable architecture links
Cost
1 weeks · Solo build
Editor folded. View-only mode.