Documentation
Welcome to the Spayse documentation. Learn how to design system architectures, flowcharts, and technical diagrams with pixel-perfect precision using our dual-mode visual canvas and Spayscript engine.
What is Spayse?
Spayse is a high-performance diagramming tool designed specifically for developers, architects, and technical writers. Rather than forcing you to choose between the speed of writing code and the freedom of visual drawing, Spayse integrates both into a single cohesive experience:
Visual Canvas
A high-precision, subpixel-snapping canvas. Drag, drop, group, resize, align, and style elements visually. Export vector-perfect SVGs and PDFs for papers, presentations, or documentation.
Spayscript (.spy)
Define your diagram structure, elements, relationships, and layout rules in our declarative language, Spayscript. Save your files with the .spy extension and compile them instantly.
How it Works
In the Spayse editor, you have a split-screen view: the **Visual Canvas** on the right, and the **Code Editor** on the left.
- One-Way Compilation: When you write code in the editor, it compiles instantly, generating or updating the elements on the canvas.
- Idempotency & Safety: Every time you compile, Spayse uses a deterministic ID system. This ensures that recompiling the same code updates the existing elements instead of creating duplicates, allowing you to iterate on your code safely.
- Visual Tweaks: Once compiled, you can drag elements around, resize them, and adjust positions on the canvas.
Tip
Your First Diagram
Here is a simple example of a Spayscript (.spy) document. It defines two shapes and connects them with an arrow:
123456// Define two shapes"User Browser" [icon: browser, color: blue]"Web Server" [icon: server, color: green] // Connect them"User Browser" -> "Web Server": HTTPS Request