What file formats does Diagram Maker support?

It supports standalone .html files containing inline SVG/CSS and .excalidraw JSON files for editable whiteboard sketches.

How does it decide between SVG and Excalidraw?

The skill uses intelligent routing: it selects Excalidraw for collaborative/editable needs and SVG for polished, standalone browser presentations.

Can I edit the diagrams created by this skill?

Yes, by choosing the Excalidraw output mode, the skill generates a standard .excalidraw file that can be opened and modified in the Excalidraw web or desktop application.

Does it require internet access for fonts or icons?

No, the SVG/HTML output is completely self-contained with no external fonts, JavaScript, or remote assets, ensuring privacy and portability.

Can it visualize cloud infrastructure?

Yes, it includes a specific 'architecture-svg' mode designed specifically for software, cloud, and infrastructure topologies, including services and trust zones.

Diagram Maker Claude Code Skill | Visual Architecture AI

This skill empowers Claude to create professional visual artifacts directly within your workflow, moving beyond text-based explanations. It offers three distinct output modes: polished clean SVGs for concepts, specialized architecture SVGs for cloud and infrastructure topology, and editable Excalidraw files for collaborative whiteboarding. By automating the extraction of nodes and relationships into structured layouts like swimlanes or hub-and-spoke models, it simplifies the process of documenting complex systems, mapping lifecycles, and sketching sequences without requiring external design software.

Características Principales

01Generates standalone SVG/HTML files with zero external dependencies or remote assets.

02Support for multiple layout patterns including hub-spoke, swimlanes, and layered stacks.

03Intelligent routing between polished presentation styles and hand-drawn whiteboard aesthetics.

04Creates editable .excalidraw files for collaborative whiteboarding and sketching.

05378,517 GitHub stars

06Specialized architecture mode for cloud infrastructure, databases, and trust zones.

Casos de Uso

01Creating educational concept maps and process flowcharts for training materials.

02Generating collaborative whiteboard sketches for team brainstorming and architectural planning.

03Visualizing complex cloud infrastructure and service dependencies for technical documentation.

Tieline — product intent grounded in code

Diagram Maker & Visualizer

Características Principales

Casos de Uso

Documentation Lookup (Context7)

Document Production Pro

Documentation Lookup (Japanese)

Características Principales

Casos de Uso