SketchCopy Anchor Link

Sketch is an open-source, local-first diagramming and collaborative whiteboard suite for React and Next.js, built as part of FileKit Studio. It delivers two high-performance SDK packages:

1. @filekit-studio/sketch: An embeddable hand-drawn collaborative whiteboard with 54 granular visibility flags, rough styling, cloud tech stencils, and multi-format export (PDF, SVG, PNG, JSON).
2. @filekit-studio/diagram: A declarative Diagram-as-Code engine that converts simple JSON graphs into production architectures with zero manual coordinates, deterministic DAG ranking, and smart collision avoidance.

Live Interactive ArchitectureCopy Anchor Link

Here is a live diagram compiled in real time from declarative JSON using @filekit-studio/diagram. You can pan, zoom, and inspect it:

💡 New to Diagram-as-Code? Check out the Step-by-Step Architecture Guide to build this exact system design from a single box to a complete multi-tier VPC network.

Core PrinciplesCopy Anchor Link

• 100% Client-Side Privacy: Runs completely inside the user's browser canvas. No server roundtrips, no telemetry.
• Deterministic DAG Layout: You declare the nodes, edges, and clusters — our layout engine places and sizes every shape and corridor mathematically.
• Organic Sketch Aesthetics: Built on rough-canvas physics for beautiful hand-drawn aesthetics without rigid corporate chart lines.
• Theme-Adaptive: Native dark and light mode rendering with automatic contrast resolution.