#diagram

Use when the user wants to turn a GitHub repo, technical article, PDF, local project or notes into an architecture or flow diagram, export an existing diagram as an image, video, GIF or Mermaid, or switch it to blueprint, hand-drawn, 3D and other styles. Based on the open-source arch-diagram-skill (MIT): reads the repo without running its code, draws inferred parts as dashed lines, and delivers only after self-check passes. Use case: Have the agent read an open-source project or an article, draw it as a moving architecture diagram, then switch styles for the occasion and export as an image or video.

A beginner's tutorial: get Node and a browser ready, install the arch-diagram Skill with one command, give a GitHub repo or article link to Claude Code or Codex to draw as a living architecture diagram, verify the inferred parts, switch between 8 styles with one sentence, and export as image, video, GIF, or Mermaid. Includes 2 copy-ready prompts.

Use when a user wants to turn a piece of content, a process or a set of knowledge points into a diagram (architecture, flowchart, sequence, timeline, quadrant, data chart, etc.), or wants to redraw a Mermaid, draw.io or Excalidraw diagram to look better or use their own website's colors. Based on the open-source diagram-design (MIT): 45 chart types, outputs a self-contained HTML file with inline SVG. Never fabricates data, states the plan before drawing, and first judges whether a diagram is worth making. Use case: Have the agent turn text, processes and data into clean HTML/SVG diagrams, and use your own website's colors and fonts.