science
Tools
Advanced
Universal Narrative Flowchart Creator
A canvas-based flowchart editor for branching stories — drag scene nodes, draw connections, undo/redo, minimap, and export to PNG, SVG, PDF, or JSON.
- Category
- Tools
- Complexity
- Advanced
- Published
- Jul 29, 2025
- Developed By
- Abdullah Tarar
- Technologies
- flowchartdiagramstorytellingcanvaskonvawriting-tools
About this Experiment
The Universal Narrative Flowchart Creator is a full diagram editor for writers, game designers, and anyone plotting a branching narrative. Scenes become draggable nodes on an infinite, zoomable canvas; choices become labelled arrows between them.
Editor Features
- Scene nodes — three shapes (rectangle, circle, diamond), custom colours, names, descriptions, and arbitrary key/value data fields per node.
- Connections — a dedicated connection mode with a live preview arrow, editable labels, solid/dashed styles, and custom colours.
- Full undo/redo — every action is snapshotted; Ctrl+Z / Ctrl+Y work as expected.
- Minimap — a corner overview with a draggable viewport for navigating large story maps.
- Search — find nodes by name or description; matches glow gold on the canvas.
- Exports — save/load your project as JSON, or export the diagram to PNG, SVG, or PDF with automatic page orientation.
- Touch support — pinch-to-zoom, two-finger pan, and long-press context menus make it usable on tablets.
- Power tools — snap-to-grid, auto-layout, keyboard shortcuts, and a right-click context menu.
Under the Hood
Built on Konva.js for high-performance 2D canvas rendering, with the entire application state held in memory and serialised to JSON for saving. Everything runs client-side — your story structure never leaves your machine.