Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@vizcharter Create a cloud architecture diagram for a serverless app with API Gateway, Lambda, and DynamoDB."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A local MCP server for Claude Code that generates presentation-grade visualizations: cloud architecture diagrams with 1100+ official AWS / GCP / Azure icons, charts and KPI dashboards, poster-style infographics — semantic containers and connectors, auto layout, and multi-format export (SVG, PNG, JPG, vector PDF).
No headless browser. Fully offline after install. Every diagram keeps a re-editable .vizc.json source next to its exports, so "open the Q2 platform diagram and add EventBridge" works months later.
claude mcp add vizcharter -- npx -y vizcharterRequires Node ≥ 20. Everything (icon packs, fonts, rasterizer) ships in the package.
Related MCP server: software-design-mermaid-mcp
Tool | Purpose |
| Validate spec → auto-layout (ELK) → render → lint → export. Returns a PNG preview inline so the model can see and iterate. |
| Patch an existing |
| Re-export an existing diagram to more formats/scales. |
| Fuzzy-search the bundled official icon packs ( |
| List built-in themes or validate custom brand overrides (WCAG-checked). |
{
"family": "architecture",
"title": "Sample Platform",
"theme": "vizcharter-light",
"direction": "DOWN",
"containers": [
{ "id": "edge", "type": "layer", "label": "Presentation Layer" }
],
"nodes": [
{ "id": "cdn", "icon": "aws.cloudfront", "label": "Amazon CloudFront", "parent": "edge" },
{ "id": "fn", "icon": "aws.lambda", "label": "AWS Lambda" }
],
"edges": [
{ "from": "cdn", "to": "fn", "kind": "sync", "label": "invoke" }
]
}Every family also accepts an optional meta footer — { author, org, project, version, date, classification, source, note } — rendered as a slim hairline band with an outlined classification chip. Ask for "authorship / version / confidential marking" and it appears, consistently, in every theme and export format.
Container types (region, account, vpc, subnet, az, layer, group) style themselves per theme — layers rotate through soft pastel tints, VPCs get vendor-convention borders. Edge kinds (sync, async, config, data) get distinct strokes and an auto-generated legend.
See examples/earth2studio.vizc.json for a full reference recreation.
vizcharter-light (default), vizcharter-dark, aws — palettes fuse a warm house brand (orange #f78c4e, sunburnt red #f66568, washed blue #476b76) with AWS squid ink + Cloudscape blue. Titles and section labels render in Faktum when the brand fonts are installed locally (node scripts/fetch-assets.mjs --brand-fonts — commercial font, gitignored and excluded from the npm package; Inter fallback otherwise). Base themes:
vizcharter-light (default), vizcharter-dark, aws (AWS Architecture Icons group conventions). Custom brand themes via spec.themeOverrides, validated with WCAG contrast checks.
npm install
npm test # vitest suite (golden files, pixel checks, MCP integration)
npm run build # tsc → dist/
node scripts/fetch-assets.mjs --icons # maintainer-only: refresh bundled assets
node scripts/render-example.mjs examples/earth2studio.vizc.json /tmp/out.pngIcon assets are © their respective vendors, redistributed per each provider's architecture-icon usage terms. Fonts: Inter and JetBrains Mono (SIL OFL, licenses bundled).
architecture — node/container/edge diagrams, ELK auto-layout, official vendor icons.
chart — bar (plain/stacked/grouped), line, area, donut, pie, rose, venn (2–3 sets), KPI tile rows.
canvas — infographics: poster templates (sectioned-poster, comparison-columns, winding-roadmap, radial-hub — see vizcharter_templates), freeform layers (wrapped text, shapes, icons), embedded chart/architecture specs, and a raw-SVG escape hatch.
User Guide — install, the six tools, all three spec families with field reference, themes & brand, provenance, exports, lint codes.
Contributor Guide — architecture, workflow (tests and eyes on pixels), the gotcha ledger (ELK/resvg/font traps already paid for), how-to recipes.
Design spec and implementation plans live in docs/superpowers/.
Client-brand theme files (vizcharter.theme.json loading), more canvas templates.
PowerPoint-friendly exports; npm publish for npx -y vizcharter.
Render a VizCharter diagram from a spec and export it. Returns a PNG preview (look at it and iterate!), written file paths, embed snippets, and lint findings. Spec family 'architecture': { family:'architecture', title?, subtitle?, theme? (vizcharter-light|vizcharter-dark|aws), direction? ('AUTO' default — lays out both ways and keeps the tighter canvas | 'DOWN' | 'RIGHT'), nodes:[{id, icon? (registry id, see vizcharter_icons), label, sublabel?, parent? (container id), pin?:{x,y}}], containers:[{id, type:'region'|'account'|'vpc'|'subnet'|'az'|'layer'|'group', label, parent?}], edges:[{from, to, kind?:'sync'|'async'|'config'|'data', label?}], callouts?:[{n, at}], legend?:boolean }. Layer containers auto-rotate pastel tints; edge kinds get distinct styling and an auto legend. Spec family 'chart': { family:'chart', type:'bar'|'bar-stacked'|'bar-grouped'|'line'|'area'|'donut'|'pie'|'rose'|'venn'|'kpi', title?, theme?, width?, height?, categories?+series? (axis types), slices? (donut/pie/rose), sets?+overlaps? (venn, 2-3 sets), tiles? (kpi: {label, value, delta?, sublabel?}), options?: { showValues?, showLegend?, donutLabel? } } — same design tokens as diagrams. Spec family 'canvas' (infographics/posters): { family:'canvas', theme?, page?:{width,height,background?}, template?:{name, slots} (see vizcharter_templates; auto-sizes the page), layers?:[ {kind:'text', x,y,width?,text,style?,align?} | {kind:'shape', shape:'rect'|'circle'|'line', ...} | {kind:'icon', icon,x,y,size} | {kind:'chart', x,y,spec} | {kind:'arch', x,y,scale?,spec} | {kind:'svg', x,y,content} (raw-SVG escape hatch) ] — embed full chart/architecture specs into posters. ALL families accept an optional meta footer block, rendered as an elegant hairline band: { author?, org?, project?, version?, date?, classification? (outlined chip, e.g. 'Confidential'), source? (attribution line), note? } — use it when the user asks for authorship, versioning, dates, classification, or source attribution on a deliverable. Files land in <out_dir>/diagrams// including the re-editable .vizc.json source.
Inputs: name (required), spec (required), formats, out_dir, +2 more.
Re-export an existing diagram (.vizc.json source) to additional formats or scales without changing it. Note: new formats are added to the diagram's directory alongside existing exports.
Inputs: formats (required), source_path (required), png_scales.
Fuzzy-search the bundled official cloud icon packs — AWS, GCP, and Azure (1100+ icons). Returns icon registry ids (aws.lambda, gcp.bigquery, azure.kubernetes-services, …) to use as node icon values, with vendor category and aliases.
Inputs: query (required), limit.
List the canvas poster templates with their slot schemas. Use with spec family 'canvas': { family:'canvas', template: { name, slots } } — the template computes layout and page size; add layers alongside to overlay extra elements.
Inputs: no named parameters.
List built-in themes, or validate custom theme overrides (pass overrides) against the token schema including WCAG contrast expectations.
Inputs: base, overrides.
Update an existing diagram from its .vizc.json source. Applies an RFC 7386 JSON merge patch (objects merge recursively, null deletes a key, arrays replace wholesale) or a full replacement, then re-renders and re-exports to the same location. Returns the new preview and lint findings.
Inputs: source_path (required), patch, formats, replace.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 6 tools
Each tool targets a distinct part of the workflow: create for new diagrams, update for editing existing sources, export for additional formats, and icons/themes/templates for asset lookup. The only mild overlap is that create and update both render and export, but their inputs and intent are clearly separated.
All tools share the lowercase snake_case 'vizcharter_' prefix and are easy to group. The action tools use verbs while the lookup tools use bare nouns, which is a minor grammatical inconsistency but still predictable and readable.
Six tools is a well-scoped size for a diagramming server: three lifecycle operations plus three supporting catalogs. No tool feels redundant or extraneous.
The core create/update/export lifecycle is covered, and icons, themes, and templates support the main spec families well. There is no delete or discovery tool for existing diagrams, but since create and update return paths and export consumes a known source, this is a workable minor gap.
Turn calls and notes into process flow diagrams in Claude, ChatGPT, VS Code, Cursor, and Teams.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Let Claude, Cursor, or ChatGPT author Mermaid diagrams your team can read and share.
Generate cloud architecture diagrams, flowcharts, and sequence diagrams.
