onemorepereira

Vizcharter — DevOps skill for Claude Code

DevOps community

MCP diagram studio for Claude Code — architecture diagrams with 1,155 official AWS/GCP/Azure icons, charts, and poster infographics.

How to install Vizcharter

This entry records only its repository, not the path inside it, so there is no exact command to give. Open onemorepereira/vizcharter and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Vizcharter does

MCP diagram studio for Claude Code — architecture diagrams with 1,155 official AWS/GCP/Azure icons, charts, and poster infographics. Auto-layout, themed, exported to SVG/PNG/JPG/PDF, re-editable forever.

Alternatives in DevOps

Claude Code GitHub Actions — by Anthropic - Official GitHub Actions integration for Claude Code with examples and documentation for automat 6.4k ★
GCP Skills Pack — GCP cloud services skills 1.6k ★
Kubernetes Skill — Kubernetes Skill for Claude Code and Codex 385 ★

README

VizCharter

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.

Install

claude mcp add vizcharter -- npx -y vizcharter

Requires Node ≥ 20. Everything (icon packs, fonts, rasterizer) ships in the package.

Tools

Tool	Purpose
`vizcharter_create`	Validate spec → auto-layout (ELK) → render → lint → export. Returns a PNG preview inline so the model can see and iterate.
`vizcharter_update`	Patch an existing `.vizc.json` (RFC 7386 merge patch) and re-render in place.
`vizcharter_export`	Re-export an existing diagram to more formats/scales.
`vizcharter_icons`	Fuzzy-search the bundled official icon packs (`"queue"` → SQS…).
`vizcharter_themes`	List built-in themes or validate custom brand overrides (WCAG-checked).

Spec example

{
  "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 / confidentia