EditorialDiagramClaude Code diagram design skill · browser playground
The Instant Web Playground for diagram-design — Zero CLI Setup
Explore 41 editorial layout grammars in the browser. Start with the live example below, drag nodes on the 4px grid, and preview your company's palette without spending AI tokens.
Explore the example for free
Example previewDrag nodes. Arrow keys move 4px. Space + drag pans.
Checking geometry…
Take it with you
Free PNG includes an EditorialDiagram watermark.
Thin lines. Considered type. No shadows.
From the skill to the canvas
CLI Skill vs. EditorialDiagram Web Studio
Bring the open-source diagram-design workflow into an interactive web studio. Keep the editorial layout approach and add a canvas for direct adjustments, live brand previews, and design-tool export.
| Workflow | Claude Code CLI Skill | EditorialDiagram Web Studio |
|---|---|---|
| Getting started | Install the diagram-design skill and configure Claude Code locally. | Open the page and try a cached diagram immediately. No CLI configuration or sign-in needed for examples. |
| Editorial layouts | Choose a layout through the skill's instructions and prompts. | Browse 41 editorial layout grammars, with ready-to-try examples and Engineer, Mixed, and Executive views. |
| Diagram input | Work with source files through prompts and local tools. | Paste Mermaid or text, or drag and drop .drawio and Excalidraw files into the workbench (file imports on paid plans). |
| 4px grid adjustments | Request revisions and inspect the generated output. | Drag nodes with the mouse or nudge 4px with arrow keys. Inspect grid and overlap checks in the live preview. |
| Company brand colors | Include palette instructions in your generation workflow. | Extract colors from a public company URL and preview the palette live. Brand previews and palette changes use zero AI tokens. |
| SVG to Figma | Take the generated SVG into your design tool. | One-click Copy SVG to Figma. Paste to edit the vector layers (paid plans). |
Cached examples, 4px adjustments, and palette previews use no AI credits. New AI generations require sign-in and credits. File imports and Figma SVG copy require a paid plan.