Diagrams from chat: dark, light, and clipboard-ready

What it does

Archify is a skill package for Claude, Codex CLI, and opencode that generates technical diagrams from conversation. Describe a system, workflow, or data pipeline in English, and the agent returns a single self-contained HTML file with an interactive diagram. The file runs offline in any browser and includes a dark/light theme toggle plus native PNG, JPEG, WebP, and SVG export.

The interesting bit

The generated SVGs ship with both dark and light CSS variable sets plus a @media (prefers-color-scheme) rule, so one file automatically respects a GitHub README reader’s system theme. Raster exports are rendered natively at up to 4× source resolution rather than upsampled, which keeps edges sharp when you paste into a deck or ticket.

Key highlights

• Five diagram types: architecture, workflow, sequence, data flow, and lifecycle
• Self-contained HTML output with zero external dependencies
• Client-side export pipeline: copy PNG to clipboard or download raster/vector without leaving the browser
• Iterative editing by chat — “add Redis” or “highlight the auth path”
• Typed renderers with schema validation and CJK font fallbacks

Caveats

• Typed renderers rely on an optional local dependency for schema validation; without it, validation is skipped while layout checks still run
• Mermaid input is handled through LLM prompts rather than a parser, meaning it translates rather than natively rendering Mermaid syntax
• When loaded as Project Knowledge in Claude.ai, only Architecture mode is available; other diagram types require code execution

Verdict

Grab it if you want architecture, workflow, or sequence diagrams without leaving your agent chat, and you value self-contained HTML over a diagram-as-code toolchain. Look elsewhere if you need a standalone CLI or native Mermaid support — this is built to be invoked by an LLM, not by a human typing commands.