Set up a coding agent for vizzy
The fastest way to get diagrams is to let a coding agent draw them. A reusable vizzy skill teaches the agent how to write and maintain vizzy diagrams in your repo. There are two ways to add it.
Install the skill
Section titled “Install the skill”Add the vizzy skill to your project with one command:
npx skills add https://github.com/lloydhumphreys/skills --skill vizzyThis puts the vizzy skill in your agent’s skills folder, for example .claude/skills/vizzy/.
It works with any tool that supports Agent Skills, including Claude
Code, Codex, and Cursor. Run the same command again to update it.
What the agent does
Section titled “What the agent does”The skill is a file such as .claude/skills/vizzy/SKILL.md that describes the format, so the
agent can draw diagrams on demand and keep them consistent over time. The skill covers:
- Where diagrams live: a
vizzy/folder, one topic per file. - Frontmatter:
title,layout, andcreated/lastEditeddates. mermaidvsvizzyfences: when to use Mermaid and when to use vizzy.- Annotations:
descto describe a node or section,notefor an aside,hintfor click-to-open detail, and where each directive fits. - Diagram types, styling, and theming: everything in the Authoring section.
- Checking its work: running
vizzy lintafter writing to catch brokenhintpaths and other problems the renderer ignores.
Run the agent inside Vizzy
Section titled “Run the agent inside Vizzy”You can run an agent without leaving the app. The document window’s side pane has two tabs:
Source (the raw .vizzy.md) and Terminal. The terminal runs a real shell in the open
document’s folder, so an agent can edit the file while the canvas reloads next to it.
Choose which agent the terminal launches from the button next to the pane:
- claude: runs the
claudeCLI. - codex: runs the
codexCLI. - Terminal: a plain login shell, for running
vizzy render,vizzy lint, or anything else by hand.
The split button opens the terminal with the agent you used last. The menu next to it
switches agents and starts a fresh shell. Your choice is remembered. Whichever agent you use,
the workflow is the same: it creates the vizzy skill and follows it when writing diagrams.