Skip to content

Templates

Curated starter kits built and maintained by the ngDiagram team. Each template is a production-grade reference implementation you can clone, extend, and ship. Complete with architecture, logic and opinionated defaults.

Screenshot of the Org Chart starter kit showing a tree of person cards with expand/collapse controls

Org Chart

Interactive organizational chart. A starter kit for tree-based diagrams with drag-and-drop reordering, expand/collapse subtrees, sidebar node editing, horizontal/vertical layouts, dark/light theme, minimap, and automatic tree layout powered by ELK.js.

Screenshot of the circuit editor: electronic components wired into a schematic with a parts palette and a properties panel for editing component specs.

Electric Circuit

Interactive circuit / schematic editor. A starter kit for building your own schematic capture or node-based editor. Drag real components from a searchable SVG library, wire them port-to-port with smart junctions, and export to SVG, JPEG, or JSON.

Screenshot of the single-line diagram editor: IEC 60617 substation symbols placed from a categorized palette onto a schematic canvas.

Single-Line Diagram

Interactive SLD editor for high-voltage electrical substations. A starter kit for building your own domain-specific schematic editor. Place IEC 60617 symbols for switchgear, transformers, and instrument transformers, connect them with geometry-derived junctions, and edit every component through a schema-driven properties panel.

AV Template

Coming soon

A starter kit for audiovisual system diagrams. Signal flow, equipment racks, and routing for integrators planning installations and documenting deployed setups.