Types

• "type":"lanes": side-by-side comparison lanes (auto vertical flow).
• "type":"canvas": free-form flowchart panels with placed nodes and routed edges.

Lanes

• columns[]: id, header, subtitle, hue, nodes, edges. Hues: blue purple green teal amber rose slate indigo.
• Node: pill, icon, caption, list[{icon,label,sub}], row[{icon,label,sub}].
• Edges: consecutive nodes auto-connect; customize with {from,to,label,rlabel,dir:"both"}; loop-backs {kind:"loop",from,to,side,label}.

Canvas

• Top: title, brand, tagline, tags[{text,hue}], panels[].
• Panel: title, hue, nodes[], edges[]. Content is 1072 wide; y grows down from 0.
• Shapes: box (icon, label, sub, num, fill, chips[], tag{text}, layout:"stack"), diamond, group (dashed, items[{icon,label}]), meter (value, best), frame (dotted container, side label).
• Fills: white green mint blue purple yellow gray red none.
• Edge: {from,to,label,color:"dark|green|red|gray",style:"dashed",badge,via:[{x,y}],my,mx,labelAt,badgeAt,loff:{dx,dy}}. Sides auto-route orthogonally; via waypoints build loops.
• Extras: lines[] bullet boxes, tiles icon grids, half panel pairs, rail[] phase bands, sequence{} panels, theme:"dark", edge curve:true + bend, edge dir:"both", rings{} onion panels, top-level palette (classic / midnight / neon / blueprint / sunset / retro), snake journey-road panels, cycle loop panels.
• Icons: any icon takes an emoji or a named line icon (server, database, shield, queue, firewall, 170+ built in; generation sends the model just the names your request mentions plus a core set); names tint with the palette. Container shapes: hex, capsule, cylinder, card, shield, cloud, queue, doc, note, terminal join box, diamond, frame, group, tiles, meter, bar, bubble. Vendor packs: aws:lambda-style; the AWS pack (61 services) and a brands pack (281 tech and nontech marks via Simple Icons, in brand colors) ship with the deploy and lazy-load on first use. Vendor and brand marks remain their owners\u2019 trademarks, used here as identifiers only; some brands (e.g. Amazon, Microsoft, Slack) are absent because their owners asked the Simple Icons project to remove them.
• Generate: pick a base template in the Generate row to have new diagrams follow that layout (the type menu locks to the template\u2019s type while one is selected); Edit current revises the loaded spec instead.
• Warnings under the editor flag unknown ids/colors/hues, off-canvas nodes, and ignored fields. Pasting a share link into the editor imports it.

Generate

• The generate box sends your description (plus the current spec in Edit mode) to Claude and loads the returned spec. It runs when this app is opened inside Claude.

Animation

• Dashed connectors march; pulse dots travel every path. Both survive SVG export. PNG export is a static 2x frame.