diagram-builder

Generate business diagrams as validated standalone SVG files from described processes.

10|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/b12io/b12-plugins --skill diagram-builder-b12io
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram-builder
Source: https://github.com/b12io/b12-plugins/tree/main/plugins/diagram-builder/skills/diagram-builder
Command: npx skills add https://github.com/b12io/b12-plugins --skill diagram-builder-b12io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Business diagrams often end up as generic boxes and arrows that say nothing about how a specific firm actually works, with text overflowing its boxes and invented details presented as fact. This Skill produces real .svg diagram files where every step comes from what the user said, every arrow is labeled, and anything unknown is left as a visible bracketed placeholder. ## Core Features & Use Cases - Typed diagram generation: Draws process flows, swimlanes, decision trees, org charts, timelines, journey maps, and 2x2 quadrants, picking the type from the question being asked. - Wiring-first structure: Writes the diagram as numbered actor-verb-outcome lines before drawing, so every box and arrow label carries real meaning and revisions edit one line at a time. - Measured SVG output: Sizes every box to its label using font metrics, enforces contrast ratios, and validates the file parses before delivery. - Use Case: A consultant pastes their client onboarding steps and asks for a flowchart for their services page; the Skill returns a branded SVG with labeled handoffs and dashed placeholders for unstated details like turnaround times. ## Quick Start Describe your process step by step and ask for a diagram, for example: draw a swimlane diagram of our client onboarding process from intake form to kickoff call.

Frequently Asked Questions about diagram-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a flowchart or process diagram as an SVG file?

Describe your process step by step in your own words, including who does each part. The Skill writes the steps as wiring lines, picks the right diagram type, and delivers a validated .svg file sized so every label fits its box.

What types of business diagrams can this Skill draw?

It draws process flows, swimlanes, decision trees, org charts, timelines, journey maps, and 2x2 quadrants. It does not draw bar, line, or pie charts of values, page mockups, wireframes, logos, or slide decks.

Can I make a diagram from a screenshot or document of an existing process?

Yes, attach a screenshot of a whiteboard, slide, or existing diagram, or attach a document describing the process, and the Skill works from what is visible. It cannot open URLs, Drive or Miro links, or files on your desktop.

Why does SVG text overflow its box in diagrams?

SVG text does not wrap, clip, or raise errors, so an over-long label draws straight out of its box silently. This Skill measures every label with font advance-width tables plus a safety budget and sizes the box to fit before placing it.

What happens if I don't know details like turnaround times or fees?

Unstated operational specifics ship as short bracketed placeholders like [turnaround] or [fee], drawn with a dashed border so they are visibly unfinished. The Skill never invents durations, roles, thresholds, or dollar amounts.

When should I not use this diagram Skill?

Do not use it for value charts like bar, line, or pie charts, which belong to an interactive visualization tool, nor for wireframes, photos, logos, slide decks, or PDFs. It is specifically for structural business diagrams delivered as SVG files.