Diagram SDKCopy Anchor Link

@filekit-studio/diagram is a declarative Diagram-as-Code compiler. Instead of calculating X and Y coordinates by hand, you declare the nodes, edges, and groups in plain JSON. The engine runs a deterministic DAG layout to position, size, and connect everything automatically.

Live Interactive DiagramCopy Anchor Link

Key CapabilitiesCopy Anchor Link

• Zero Coordinate Math: Provide connectivity relationships (from, to) — ranks and coordinates are calculated mathematically.
• Organic Hand-Drawn Style: Shapes, dashed frames, and sketchy fills powered by @filekit-studio/sketch.
• Obstacle Avoidance: Orthogonal elbow connectors automatically seek clear vertical corridors between shapes.
• Submerged Passthrough Tunneling: Connectors that must pass through intermediate shapes automatically turn into subtle dotted lines at 35% opacity.
• Dual-Theme Contrast: Crisp contrast and legible text across light and dark modes out of the box.