Architect Visualize — Development skill for Claude Code
Realize a catalog workload pattern on a chosen provider and write its views (Mermaid, sequence, C4/Structurizr, diagrams.net, React Flow, SVG) into docs/architecture/views/.
How to install Architect Visualize
Installs to ~/.claude/skills/frankxai-ai-architect-architect-visualize/SKILL.md
mkdir -p ~/.claude/skills/frankxai-ai-architect-architect-visualize && curl -fsSL https://raw.githubusercontent.com/frankxai/ai-architect/HEAD/commands/architect-visualize.md -o ~/.claude/skills/frankxai-ai-architect-architect-visualize/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Architect Visualize does
description: Realize a catalog workload pattern on a chosen provider and write its views (Mermaid, sequence, C4/Structurizr, diagrams.net, React Flow, SVG) into docs/architecture/views/. Reads the catalog; writes only under docs/architecture/views/. argument-hint: " [provider] | --list"
/architect-visualize
Produces customer-ready architecture views from the multi-cloud catalog. Arguments: `$ARGUMENTS`. Load `${CLAUDE_PLUGIN_ROOT}/skills/architecture-studio/SKILL.md` befo
Alternatives in Development
- Spreadsheet — Create, edit, analyze, and visualize spreadsheets with formulas 14.6k ★
- Portaljs Add Map — Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase 2.3k ★
- Post Everywhere — Publish one piece of content — text, image, or video — to every connected platform (or a chosen subset) in a s 212 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
SVG Animate
Animate an SVG — icon, logo reveal, stroke draw, morph, mascot loop — or turn a frame sequence / flat clip int
Al Explain Diagram
Explain a topic scaled to an audience, with a simple Mermaid flowchart or sequence diagram alongside the text
Multi Chart Draw Skills
支持多种图表类型的绘制工具,包括思维导图、流程图、数据可视化图表、数学函数图等;可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表,并导出为 PNG、SVG、
Render Mermaid Cmd
Mermaidレンダリングエージェント - Mermaid図をPNG/SVG/PDF画像に変換。
Cc Show
把當前主題畫出來取代散文——文字圖(file tree/call tree/diff)、inline widget(SVG/HTML/Mermaid)、或 Artifact 三選一。視覺是取代說明,不是額外附加
Deep Dive Claude Code
《深入理解 Claude Code 源码》— 系统剖析 Anthropic Claude Code CLI 的架构设计、工程实践与编程哲学 25 chapters, 101 Mermaid diagrams, 467 c
Related Agents
Diagram Builder
Generates ship-time Mermaid state and sequence diagrams, an API endpoint catalog with request/response schemas
Figure Engineer
Produces every code-rendered figure: diagrams (Mermaid, D2, Graphviz), charts from data (matplotlib, Vega-Lite
Visual Story Designer
Defines visual concept, section rhythm, diagrams (Mermaid or SVG), comparison layouts, timelines, icon metapho