Delineata — Web-Based Diagramming Editor

A full-featured, browser-based diagramming editor. Create flowcharts, network diagrams, and general-purpose diagrams entirely in the browser — no installation required. Diagrams are saved in the open .dlnt format; .vsdx files can be imported and exported for interoperability.

Tech Stack

Layer	Library
Framework	Next.js 16 (App Router) + TypeScript
Canvas	React Flow (@xyflow/react v12)
State	Zustand v5 + Zundo (undo/redo)
Styling	Tailwind CSS v4
Icons	Lucide React
IDs	uuid
File I/O	jszip + fast-xml-parser

Features — v0.2.0

Canvas & Interaction

• Full-screen editor: ribbon toolbar, shape sidebar, canvas, property panel
• Drag shapes from the sidebar onto the canvas; connect nodes by dragging between handles
• Undo / Redo (Ctrl+Z / Ctrl+Shift+Z) with a full history stack
• Snap-to-grid toggle with configurable 20 px grid
• Multi-select via marquee drag; group / ungroup selected shapes
• Alignment engine: align left, center, right, top, middle, bottom across any selection
• Z-order controls: Bring to Front, Send to Back
• Ctrl+D to duplicate selected shapes
• Format Painter: copy fill, stroke, and font style from one shape to another

Shape Library

• Basic: Rectangle, Ellipse, Diamond, Text label
• Flowchart: Terminal (stadium), Document (wavy bottom), Cylinder (database), Parallelogram, Hexagon
• Network: Server (rack unit), Cloud, Router
• All shapes rendered as SVG with consistent dash patterns and selection styling
• Shape rotation via a drag handle (Shift snaps to 15°) or exact degree input

Drawing Tools

• Line tool — click-drag to place a freestanding straight line
• Freehand pen — draw smooth SVG paths directly on the canvas
• Text tool — click to place a standalone text label
• Shape draw mode — click-drag to size a rectangle or ellipse by bounding box

Connectors

• Orthogonal, curved, and straight routing per edge
• Dash patterns: solid, dashed, dotted
• Arrowhead styles per end: none, open, filled
• Inline edge labels (double-click any connector to edit)
• Custom waypoints: drag a midpoint handle to insert a fixed bend point

Property Inspector

• Position (X, Y), size (W, H), and rotation inputs
• Fill color, stroke color, stroke width, and dash pattern
• Font family, size, and color
• Full connector styling panel

Layers & Pages

• Per-page layer management: visibility toggle, lock toggle, rename, add/delete
• Multi-page support: add, rename, and delete pages via tabs at the bottom

Custom Stencils

• Right-click any shape to save it as a reusable stencil
• Stencils appear in the sidebar with a live preview; drag back onto the canvas

File Formats

• .dlnt (native) — open/save the full diagram state including layers, stencils, freehand paths, rotation, and dash styles
• .vsdx import — load diagrams from .vsdx archives; shapes, connectors, labels, and styles are mapped to the canvas
• .vsdx export — write the current diagram back to a .vsdx archive

Project Structure

src/
├── app/
│   ├── layout.tsx
│   └── page.tsx                    # Editor layout (TitleBar → Ribbon → Canvas ← Sidebar / PropertyPanel → PageTabs)
├── components/
│   ├── DiagramCanvas.tsx           # React Flow canvas, draw-tool overlay, keyboard shortcuts
│   ├── Ribbon.tsx                  # Tabbed command bar (File, History, Clipboard, Draw, Arrange, Align, View)
│   ├── Sidebar.tsx                 # Shape catalogue (Basic / Flowchart / Network), stencils, layers
│   ├── SidebarClient.tsx           # SSR-safe dynamic wrapper
│   ├── PropertyPanel.tsx           # Context-sensitive inspector (node geometry/style/text; edge routing/style)
│   ├── TitleBar.tsx                # Application header
│   ├── PageTabs.tsx                # Multi-page tab bar
│   ├── ContextMenu.tsx             # Right-click menu (Save as Stencil, Delete)
│   ├── edges/
│   │   └── CustomEdge.tsx          # Unified edge renderer (routing, dash, arrows, labels, waypoints)
│   └── nodes/
│       ├── CustomShapeNode.tsx     # SVG renderer for all 13 shape types + rotation handle
│       ├── FreehandNode.tsx        # Renderer for freehand / line drawing tool paths
│       └── GroupNode.tsx           # Group container node
├── store/
│   └── useDiagramStore.ts          # Zustand store with Zundo temporal middleware
├── types/
│   └── diagram.ts                  # Strict TypeScript interfaces (no `any`)
└── utils/
    ├── vsdxParser.ts               # Unpack .vsdx archives (jszip + fast-xml-parser)
    ├── visioMapper.ts              # .vsdx XML → canvas nodes / edges
    ├── visioExporter.ts            # Canvas nodes / edges → .vsdx XML
    └── dlntFormat.ts               # Save / load .dlnt (zip-wrapped JSON)

Getting Started

Prerequisites

• Node.js 20+ and npm

Install and run

npm install
npm run dev

Open http://localhost:3000.

Build for production

npm run build
npm start

Lint and type-check

npm run lint
npm run typecheck

Testing

Delineata has a full unit and integration test suite powered by Vitest.

# Run all 233 tests
npx vitest run

# Watch mode (re-runs on save)
npm test

# Generate a coverage report
npm run test:coverage

See TESTING.md for a detailed breakdown of every test file and what it covers.

Roadmap

See ROADMAP.md for the full feature roadmap. Phase 10 (PNG export, infinite canvas, rulers, smart guides, templates) is next.