Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When the user asks to render a Mermaid diagram as SVG or PNG, or provides Mermaid code/description needing visualization.
bun run scripts/render.ts (or tsx/deno alternatives)Produces a scalable SVG and a high-resolution PNG of the diagram in the working directory, ready for docs or sharing.
Use Cases
A developer writing technical documentation needs to show a CI/CD pipeline. They describe the flow in text; the skill generates valid Mermaid code, renders a clean SVG and a 4K PNG with a chosen theme (e.g., GitHub Dark), and saves both to the repo. This saves manual drawing time and yields professional, version-controllable diagrams.
A designer preparing a slide deck wants a state machine diagram as a high-res image. They provide Mermaid code; the skill renders SVG and uses agent-browser to capture a padded, high-resolution PNG at 4K. The output fits the deck's dark theme and is crisp on projectors, improving presentation quality.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File