New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

System Diagram Generator

by ArabelaTso in ArabelaTso/Skills-4-SE

Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams.

Apache-2.0Auto-check passedDevelopment

Install System Diagram Generator

skills CLI
$ npx skills add ArabelaTso/Skills-4-SE --skill system-diagram-generator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ArabelaTso/Skills-4-SE system-diagram-generator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ArabelaTso/Skills-4-SE.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/system-diagram-generator .claude/skills/system-diagram-generator && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
system-diagram-generator
GitHub stars
253
Token cost
~1.5k tokens
SKILL.md length
623 words
Files
4 (incl. references)
Skills in repo
170
Repo updated
First seen
Licence
Apache-2.0

At a glance

Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams.

  • Works in 5 steps: Understand the system: Ask clarifying… → Choose the format: Select based on user… → Select diagram type: Match the… → …
  • Claude needs to visualize system components
  • SKILL.md covers Quick Start, Format Selection, Diagram Types and Best Practices, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

System Diagram Generator is an agent skill from ArabelaTso/Skills-4-SE. Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams. Use when Claude needs to visualize system components, infrastructure, data flows, or interactions. Supports Mermaid (recommended for Markdown/GitHub), PlantUML (for detailed UML), and Graphviz/DOT (for complex networks). Trigger when users request diagrams, visualizations, or ask to "show", "diagram", "visualize", or "map out" system architecture, infrastructure, data…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/graphviz-patterns.md`, `references/mermaid-patterns.md` and `references/plantuml-patterns.md`).

It sits in Development, covering Diagrams. It works with Mermaid and GitHub. The repository describes itself as: A curated list of 180+ useful Claude Skills for Software Engineering and resources for customizing AI for SE workflows. The licence is Apache-2.0.

When your agent uses it

  • Claude needs to visualize system components
  • Users request diagrams
  • Map out system architecture
  • Component interactions

Example prompts

  • “diagram”
  • “visualize”
  • “map out”
  • “/system-diagram-generator”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Understand the system: Ask clarifying questions about components, relationships, and scope
  2. Choose the format: Select based on user preference or context (default to Mermaid for versatility)
  3. Select diagram type: Match the visualization to the information being conveyed
  4. Generate the diagram: Create the diagram code with clear labels and structure
  5. Provide context: Include a brief explanation of what the diagram shows

What it can do on your machine

Read from SKILL.md and the folder at commit 4f38503. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

System Diagram Generator loads about 1.5k tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 144 tokens; SKILL.md has 623 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~144
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ArabelaTso/Skills-4-SE at commit 4f38503, republished under its Apache-2.0 licence (© ArabelaTso). 623 words, ~1,509 tokens.

Download SKILL.mdSave it as .claude/skills/system-diagram-generator/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
system-diagram-generator
description
Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams. Use when Claude needs to visualize system components, infrastructure, data flows, or interactions. Supports Mermaid (recommended for Markdown/GitHub), PlantUML (for detailed UML), and Graphviz/DOT (for complex networks). Trigger when users request diagrams, visualizations, or ask to "show", "diagram", "visualize", or "map out" system architecture, infrastructure, data flows, or component interactions.

System Diagram Generator

Generate clear, accurate visual representations of system structure using text-based diagram formats.

Quick Start

When a user requests a system diagram:

  1. Understand the system: Ask clarifying questions about components, relationships, and scope
  2. Choose the format: Select based on user preference or context (default to Mermaid for versatility)
  3. Select diagram type: Match the visualization to the information being conveyed
  4. Generate the diagram: Create the diagram code with clear labels and structure
  5. Provide context: Include a brief explanation of what the diagram shows

Format Selection

Mermaid (Default)

Use for most cases - renders in Markdown, GitHub, GitLab, and many documentation tools.

Best for:

  • Quick visualizations
  • Documentation in Markdown files
  • GitHub/GitLab README files
  • General-purpose diagrams

See: mermaid-patterns.md for examples

PlantUML

Use when detailed UML diagrams are needed or when working with Java/enterprise systems.

Best for:

  • Detailed UML diagrams
  • C4 architecture models
  • Complex component relationships
  • Enterprise documentation

See: plantuml-patterns.md for examples

Graphviz/DOT

Use for complex network topologies or when fine-grained layout control is needed.

Best for:

  • Network diagrams
  • Complex hierarchies
  • Graph structures
  • Custom layout requirements

See: graphviz-patterns.md for examples

Diagram Types

Architecture Diagrams

Show system components, services, databases, and their relationships.

Use when:

  • Explaining system structure
  • Documenting microservices
  • Showing component dependencies
  • Illustrating system boundaries

Key elements:

  • Services/components (boxes)
  • Databases (cylinders)
  • External systems
  • Communication protocols
  • Data stores
Data Flow Diagrams

Illustrate how data moves through the system.

Use when:

  • Explaining data processing pipelines
  • Documenting ETL processes
  • Showing transformation steps
  • Illustrating validation flows

Key elements:

  • Data sources
  • Processing steps
  • Transformations
  • Data stores
  • Outputs
Deployment Diagrams

Show infrastructure, servers, containers, and deployment topology.

Use when:

  • Documenting cloud infrastructure
  • Explaining deployment architecture
  • Showing network topology
  • Illustrating container orchestration

Key elements:

  • Cloud providers/regions
  • Networks/subnets
  • Servers/containers
  • Load balancers
  • Databases and caches
Sequence Diagrams

Visualize API calls, user interactions, and process flows over time.

Use when:

  • Documenting API interactions
  • Explaining authentication flows
  • Showing request/response cycles
  • Illustrating multi-step processes

Key elements:

  • Actors/participants
  • Messages/calls
  • Time sequence (top to bottom)
  • Return values
  • Conditional logic

Best Practices

Clarity
  • Use descriptive, meaningful names for all components
  • Keep diagrams focused on one aspect of the system
  • Avoid overcrowding - split complex systems into multiple diagrams
  • Use consistent naming conventions
Structure
  • Group related components using subgraphs/clusters
  • Show clear directional flow (left-to-right or top-to-bottom)
  • Use appropriate shapes for different component types
  • Include relevant protocols and technologies
Show full SKILL.md (240 more words)Show less
Context
  • Add a title or caption explaining what the diagram shows
  • Include legends for non-obvious symbols or colors
  • Provide brief explanations of key components
  • Note any assumptions or simplifications
Format-Specific
  • Mermaid: Use standard graph types (flowchart, sequence, C4)
  • PlantUML: Leverage UML stereotypes and C4 includes
  • Graphviz: Use clusters for grouping and rankdir for layout

Workflow

  1. Gather requirements

    • What system or process needs visualization?
    • What level of detail is needed?
    • Who is the audience?
    • Any format preferences?

  2. Choose format and type

    • Select diagram format (Mermaid/PlantUML/Graphviz)
    • Select diagram type (architecture/data flow/deployment/sequence)
    • Load relevant reference file if needed

  3. Create diagram

    • Define all components/nodes
    • Establish relationships/edges
    • Add grouping/structure
    • Include labels and protocols

  4. Validate and refine

    • Ensure all components are labeled
    • Verify relationships are clear
    • Check for visual balance
    • Add explanatory text

  5. Deliver

    • Provide the diagram code in a code block
    • Include brief explanation
    • Suggest improvements or variations if relevant

Example Usage Patterns

User: "Show me the architecture of our authentication system" → Create Mermaid architecture diagram showing auth components

User: "Diagram the data flow for user registration" → Create Mermaid flowchart showing registration data flow

User: "Visualize our AWS deployment" → Create Mermaid or Graphviz deployment diagram with AWS infrastructure

User: "Show the sequence of API calls for checkout" → Create Mermaid sequence diagram showing checkout flow

User: "I need a detailed UML component diagram" → Create PlantUML component diagram with stereotypes

User: "Map out our network topology" → Create Graphviz network diagram with clusters

© ArabelaTso, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/system-diagram-generator of ArabelaTso/Skills-4-SE.

  • SKILL.md
  • references/graphviz-patterns.md
  • references/mermaid-patterns.md
  • references/plantuml-patterns.md

Open the folder on GitHubat commit 4f38503

Compare with similar skills

System Diagram Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

System Diagram Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
System Diagram Generator this skillArabelaTso/Skills-4-SE253—~1.5kAutomated safety check: PassApache-2.0
GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram18k—~427Automated safety check: PassMIT
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid1761 repos~5.6kAutomated safety check: PassNone
GitDiagram Repo Architectureahmedkhaleel2004/gitdiagram18k—~429Automated safety check: PassMIT
Deep Repository Architecture Analyzeryzddmr6/repo-analyzer491—~2.2kAutomated safety check: PassMIT
Work Issuejoesaby/astro-mermaid123—~891Automated safety check: PassMIT

Similar skills

  • GitDiagram Repository Overview

    ahmedkhaleel2004/gitdiagram

    Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.

    18k GitHub stars~427 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Design Doc Mermaid

    SpillwaveSolutions/design-doc-mermaid

    Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.

    176 GitHub starsUsed in 1 repo~5.6k tokens
    DevelopmentAuto-check passed

  • GitDiagram Repo Architecture

    ahmedkhaleel2004/gitdiagram

    Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.

    18k GitHub stars~429 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Deep Repository Architecture Analyzer

    yzddmr6/repo-analyzer

    Produces an in-depth architecture report on an open-source project or framework, explaining why it is designed the way it is rather than just what the code does.

    491 GitHub stars~2.2k tokensUpdated 5 mo ago
    DevelopmentAuto-check passed

  • Work Issue

    joesaby/astro-mermaid

    End-to-end workflow for resolving a GitHub issue in astro-mermaid — triages complexity, then runs brainstorm → TDD → implement → docs/spec → code review at the right depth.

    123 GitHub stars~891 tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

  • Domain Diagram

    shuotao/REVIT_MCP_study

    引導剛寫完 domain 的老師把 SOP 流程圖像化：先討論主流程、做流程健檢（迴圈／死路／缺口），再把流程整理成結構化 spec，交由 .claude/skills/domain-diagram/scripts/mermaidfromspec.py 確定性地產出 GitHub 原生 mermaid 圖與健檢結論並回嵌…

    102 GitHub stars~816 tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

More from ArabelaTso/Skills-4-SE

All 170 skills in this repo

  • Framework Migration Assistant

    ArabelaTso/Skills-4-SE

    Automatically migrate Python web applications between frameworks (Flask → FastAPI, Django → FastAPI).

    253 GitHub stars~1.9k tokensUpdated 1 mo ago
    Auto-check passed

  • Metamorphic Test Generator

    ArabelaTso/Skills-4-SE

    Generate test cases using metamorphic testing by applying transformations based on metamorphic properties.

    253 GitHub stars~798 tokensUpdated 1 mo ago
    Auto-check passed

  • Reproduction Trace Instrumenter

    ArabelaTso/Skills-4-SE

    Instruments programs to capture execution traces specifically for reproducing reported bugs, enabling consistent replay and diagnosis of failures.

    253 GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed

  • Spring Mvc To Boot Migrator

    ArabelaTso/Skills-4-SE

    Automatically migrate Spring MVC applications to Spring Boot.

    253 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed

  • State Snapshot Instrumenter

    ArabelaTso/Skills-4-SE

    Instrument programs (Python, C/C++, Java) to capture snapshots of key program states at runtime, including variables, memory, and call stacks.

    253 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about System Diagram Generator

What does System Diagram Generator do?

Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams. System Diagram Generator is an agent skill from ArabelaTso/Skills-4-SE. Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams.

When should I use System Diagram Generator?

System Diagram Generator fits situations like: Claude needs to visualize system components; users request diagrams; map out system architecture; component interactions.

How do I install System Diagram Generator in Claude Code?

Run `npx skills add ArabelaTso/Skills-4-SE --skill system-diagram-generator -a claude-code`. Or copy the skill folder (skills/system-diagram-generator in ArabelaTso/Skills-4-SE) into .claude/skills/system-diagram-generator in your project. Claude Code loads it when a task matches its description.

How do I install System Diagram Generator in Codex?

Run `npx skills add ArabelaTso/Skills-4-SE --skill system-diagram-generator -a codex`. Or copy the skill folder (skills/system-diagram-generator in ArabelaTso/Skills-4-SE) into .agents/skills/system-diagram-generator in your project. Codex loads it when a task matches its description.

Can I use System Diagram Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ArabelaTso/Skills-4-SE --skill system-diagram-generator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/system-diagram-generator, .gemini/skills/system-diagram-generator, .github/skills/system-diagram-generator and .opencode/skills/system-diagram-generator in your project.

What does System Diagram Generator need to run?

SKILL.md names no scripts, command-line tools or credentials: System Diagram Generator is instructions for the agent only.

Does System Diagram Generator access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is System Diagram Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does System Diagram Generator use?

System Diagram Generator is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does System Diagram Generator use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.9k tokens, read only when the agent opens those files.

What are the alternatives to System Diagram Generator?

Skills that share tags, products or a category with System Diagram Generator: GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 176 stars), GitDiagram Repo Architecture (ahmedkhaleel2004/gitdiagram, 18k stars) and Deep Repository Architecture Analyzer (yzddmr6/repo-analyzer, 491 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains System Diagram Generator?

ArabelaTso (a GitHub user) maintains it in ArabelaTso/Skills-4-SE, which has 253 GitHub stars. The repository holds 170 skills in this directory. The repository was last updated on August 21, 2026.

Source: ArabelaTso/Skills-4-SE on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.