Brand Diagram - your brand's colours, your diagram, one standalone file

Paste your own CSS, SCSS, Style Dictionary or Figma design tokens, design-system Markdown or an exported page, and the browser reads your palette and your type out of it for free - resolving var() indirection, walking nested token trees, and measuring every WCAG ratio with translucent values composited first. It maps them onto the ten semantic roles a diagram needs, derives the dark variant by the inversion rule, and tells you exactly which contrast checks your brand fails. Then describe what should be drawn and get a real diagram in that skin across eleven types: flowchart, zoned architecture, swimlane, sequence, layer stack, pyramid and funnel with honest widths, nested containment, tree and org chart, timeline with honest spacing, quadrant, and two or three-set Venn. A third stage adds the editorial layer: at most two italic-serif callouts with dashed leaders, the focal decision, the semantic pattern and the screen-reader description. Everything is drawn in your browser from an editable spec, so re-rendering is free and instant, and the deliverable is one self-contained HTML file with light and dark inline SVG and no JavaScript in it - plus SVG, Mermaid, node and edge CSVs, Markdown, CSS custom properties, and a style-guide.md you can drop back into the source skill so your agent inherits the same brand. Derived from the MIT-licensed diagram-design agent skill by cathrynlavery (@cathrynlavery/diagram-design), whose grammar it follows: the ten colour roles, one accent, shape carries type, honest widths and spacing, the annotation-callout primitive, the sketchy variant and the four output dials. Not affiliated with that skill's author.

Every public app is built from a security-scanned skill and must pass a clean scan — skill and frontend — before it can be listed. Have a skill of your own? Turn it into an app — or read the step-by-step walkthrough.