/chartware

name: chartware
description: Generate enterprise-grade diagrams and data charts in three media — Mermaid (text-first diagrams), hand-authored inline SVG (pixel-perfect charts and figures for HTML embedding), and draw.io via the drawio MCP (editable diagram artifacts) — with a curated visual style system wired to the plugin's brand registry. Use this skill whenever the user asks to create architecture diagrams, reference architectures, system design diagrams, infrastructure diagrams, flowcharts, sequence diagrams, org charts, technology stack visualizations, or any technical diagram that should look professional and consistent — and also for DATA charts (bar, line, area, donut, scatter, sparkline, KPI/stat tile, heatmap) drawn as SVG for web pages, docs, or standalone files. Also trigger when the user mentions "chartware", "pretty-arrows" (this skill's former name), "draw.io", "drawio", "mxGraph", "mermaid", "SVG chart", or asks for diagrams in the style of their reference architecture. The skill picks the medium by fit or honors the user's explicit choice.

chartware — Diagrams & Data Charts (Mermaid · SVG · draw.io)

One skill, three media, one visual identity. Diagrams and charts resolve their colors from the same brand registry as slideware decks and knowledgebase sites.

Choosing the medium

**An explicit user request always wins** ("as a mermaid diagram", "in draw.io", "as SVG"). Otherwise pick by fit — and say which medium you chose and why:

| Medium | Choose when | Strengths | Limits | |---|---|---|---| | **Mermaid** | The diagram lives in markdown, a knowledgebase page, or an artifact; speed and text-maintainability matter more than exact layout | Renders natively in most targets; diffable; cheap to iterate | Auto-layout only — no pixel control; weak for data charts | | **SVG** | Data charts (default medium for them); polished figures embedded in HTML deliverables; standalone `.svg` files; print | Total control; themes with the page (light/dark); no dependencies | Hand-computed layout; not end-user editable | | **draw.io** | The user will open/edit/maintain the diagram; large layered reference architectures; a `.drawio` artifact is the deliverable | Real editor round-trip; the full curated style catalog | Needs the drawio MCP; heavier iteration loop |

Rules of thumb: flowchart in a README → Mermaid. Revenue chart in a report page → SVG. Enterprise reference architecture the client will maintain → draw.io. A diagram embedded in a knowledgebase/slideware deliverable → Mermaid if its auto-layout suffices, SVG when the layout must be exact.

Brand resolution (all media)

If the user names a brand or style ("in the AAB style", "AcmeCorp-branded"), resolve it from the registry — `$KNOWLEDGEWARE_BRANDS_DIR/<name>.md` first (if that env var is set — the user's own brands directory), then `styles/brands/<name>.md` (plugin root — two directories above this skill), falling through to `styles/<name>.md` for the generic defaults — and substitute its palette/typography per the **brandware skill's `references/consumer-mappings.md` §chartware**. The mapping is deliberately understated — surface fills with categorical strokes, brand accent in at most two roles, low-saturation tints; a branded diagram should read as the brand's document, not a poster of its colors. For data charts (bars, lines, KPIs) follow brandware's `references/chart-styling.md`. If the brand isn't installed, use the defaults below and say so. When the user names no brand at all, check the `DEFAULT` marker (a one-line file naming a registry entry; `$KNOWLEDGEWARE_BRANDS_DIR/DEFAULT` wins over `styles/brands/DEFAULT`) and apply that identity if it resolves, telling the user; otherwise use each medium's default styling.

---

Medium 1: Mermaid

For flowcharts, sequence diagrams, state machines, ER diagrams, gantt charts, and quick architecture sketches that live in text.

**Embedding**: ` ```mermaid ` fences in markdown and artifact pages; `<pre class="mermaid">` blocks in HTML that loads mermaid (knowledgebase pages do). If a mermaid validation/render tool is available (`tool_search` for "mermaid"), validate the syntax before delivering; otherwise double-check quoting — labels with `()`, `/`, or `:` need `["..."]` quoting.

**Branding**: apply the brandbook via an init block using the themeVariables mapping in brandware's `consumer-mappings.md` (§knowledgebase covers it): `primaryColor` = ~12% accent tint over bg · `primaryBorderColor` = accent · `primaryTextColor` = ink · `lineColor` = ink at ~70% (never the accent — edges recede) · `edgeLabelBackground` = bg · `fontFamily` = brand sans:

%%{init: {"theme":"base","themeVariables":{"primaryColor":"#EDF0FC","primaryBorderColor":"#4969E1","primaryTextColor":"#111827","lineColor":"#4B5563","edgeLabelBackground":"#FFFFFF","fontFamily":"Inter, sans-serif"}}}%%

**Discipline**: keep node labels short (wrap with `<br/>`); prefer `flowchart TD/LR` direction that matches reading order; subgraphs for layers/containers; don't fight the auto-layout — if you're adding invisible edges to force positions, switch to SVG or draw.io and say so.

---

Medium 2: SVG (charts & figures)

Hand-authored inline SVG — the default medium for **data charts**, and the right one for polished diagrams embedded in HTML.

**Read `references/svg-charts.md` before drawing** — it holds the mechanics: pixel-space viewBox + margin convention, scale/tick math (1-2-5-10), per-chart-type geometry (rounded-top bar paths, flat-tangent curve smoothing, the C=400 donut trick), text rules (`dy="0.32em"`, width estimation, halos), the three-layer theming token block (page-token inheritance + dark mode), accessibility pattern, and the pitfall list.

**Start from a template** in `templates/svg/` and adapt data, scales, and labels:

| Request | Template | |---|---| | Vertical bars, grouped comparison | `bar-grouped.svg` | | Ranking, long labels, n > 8 | `bar-horizontal.svg` | | Trend over time, w