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

HTML Architecture Diagram Maker

by taracodlabs in taracodlabs/aiden

Generates dark-themed architecture, component, data-flow and network diagrams as self-contained HTML and SVG files that open in any browser.

Apache-2.0Auto-check passedDevelopment

Install HTML Architecture Diagram Maker

skills CLI
$ npx skills add taracodlabs/aiden --skill architecture-diagram -a claude-code

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

GitHub CLI
$ gh skill install taracodlabs/aiden architecture-diagram --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/taracodlabs/aiden.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/architecture-diagram .claude/skills/architecture-diagram && 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
architecture-diagram
GitHub stars
852
Token cost
~1.3k tokens
SKILL.md length
233 words
Files
2
Skills in repo
63
Repo updated
First seen
Licence
Apache-2.0

At a glance

Generates dark-themed architecture, component, data-flow and network diagrams as self-contained HTML and SVG files that open in any browser.

  • Works in 3 steps: Plan the diagram layout → Generate a dark-themed HTML diagram… → Add a group/layer box
  • Drawing a system or microservices architecture to share in a browser
  • SKILL.md covers When to Use, How to Use, Examples and Cautions
  • Reaches w3.org

What it does

Diagrams come out as a single HTML file with inline SVG, so nothing else needs to be installed and the result can be opened and shared from a browser. The skill targets architecture, component interaction, data flow or pipeline and network topology diagrams, all in a dark theme.

The agent first outlines components, relationships with their direction, and logical groupings such as frontend, backend and data. It then calls a short Python make_diagram function that takes a title, a list of components, connections and an output file name, and writes the diagram. Layers are drawn as dashed background rectangles placed before the component boxes.

Cautions in the skill keep diagrams to 10 to 15 components, suggest planning coordinates with about 250 pixels of horizontal and 120 pixels of vertical spacing, and note that arrows pointing left or up need their endpoints reversed. Examples include a microservices layout, an ETL pipeline and a CI/CD flow from git push to production.

When your agent uses it

  • Drawing a system or microservices architecture to share in a browser
  • Showing how data moves through a pipeline from source to warehouse to BI tool
  • Mapping a CI/CD flow from commit to production as a diagram

Example prompts

  • “Draw a microservices architecture with an API gateway, three services and a database.”
  • “Create a data pipeline diagram from raw data through ETL to the warehouse and a BI tool.”
  • “Visualize our CI/CD pipeline from git push to production as an HTML diagram.”

Requirements

  • Python to run the diagram generator snippet

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Plan the diagram layout
  2. Generate a dark-themed HTML diagram (Python)
  3. Add a group/layer box

What it can do on your machine

Read from SKILL.md and the folder at commit 3704204. 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 (its code samples are python).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • w3.org

    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

HTML Architecture Diagram Maker loads about 1.3k tokens when it runs. Until then it costs about 21 tokens; SKILL.md has 233 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~21
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

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 taracodlabs/aiden at commit 3704204, republished under its Apache-2.0 licence (© taracodlabs). 233 words, ~1,308 tokens.

Download SKILL.mdSave it as .claude/skills/architecture-diagram/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
architecture-diagram
description
Architecture and component diagrams as HTML/SVG (dark-themed)
category
creative
version
1.0.0
origin
aiden
license
Apache-2.0
tags
architecture, diagram, svg, html, dark-theme, system-design, visualization, components, flowchart

Architecture Diagram Generator

Create dark-themed, professional system architecture and component diagrams rendered as self-contained HTML+SVG files. No external tools needed — output opens in any browser.

When to Use

  • User wants a system architecture diagram
  • User wants a component interaction diagram
  • User wants a data flow or pipeline diagram
  • User wants a network topology visualization
  • User wants a diagram they can open in the browser and share

How to Use

1. Plan the diagram layout

Before generating, outline:

- Components: what boxes/nodes exist?
- Relationships: which components talk to which? Direction?
- Groupings: are there logical layers (frontend, backend, data)?
- Key labels: service names, technologies, data formats
2. Generate a dark-themed HTML diagram (Python)
python
import textwrap

def make_diagram(title, components, connections, output="diagram.html"):
  """
  components: list of { id, label, x, y, color }
  connections: list of { from_id, to_id, label }
  """
  box_w, box_h = 160, 50
  width  = max(c["x"] for c in components) + box_w + 80
  height = max(c["y"] for c in components) + box_h + 80

  def box(c):
    bg = c.get("color", "#1e3a5f")
    return f'''<rect x="{c['x']}" y="{c['y']}" width="{box_w}" height="{box_h}" rx="8"
      fill="{bg}" stroke="#4a9eff" stroke-width="1.5"/>
    <text x="{c['x']+box_w//2}" y="{c['y']+box_h//2+5}" text-anchor="middle"
      fill="#e0e8ff" font-family="monospace" font-size="13">{c['label']}</text>'''

  id_to_comp = {c["id"]: c for c in components}
  def arrow(conn):
    a, b = id_to_comp[conn["from_id"]], id_to_comp[conn["to_id"]]
    x1, y1 = a["x"] + box_w, a["y"] + box_h // 2
    x2, y2 = b["x"],           b["y"] + box_h // 2
    mid_x = (x1 + x2) // 2
    lbl = conn.get("label","")
    return f'''<line x1="{x1}" y1="{y1}" x2="{x2}" y2="{y2}"
      stroke="#4a9eff" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="{mid_x}" y="{(y1+y2)//2 - 6}" text-anchor="middle"
      fill="#8ab4f8" font-family="monospace" font-size="11">{lbl}</text>'''

  html = f"""<!DOCTYPE html><html>
<head><meta charset="utf-8"><title>{title}</title>
<style>body{{background:#0d1117;margin:0;display:flex;justify-content:center;padding:40px}}</style>
</head><body>
<svg width="{width}" height="{height}" xmlns="http://www.w3.org/2000/svg">
<defs><marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0,10 3.5,0 7" fill="#4a9eff"/></marker></defs>
<text x="{width//2}" y="30" text-anchor="middle" fill="#e0e8ff" font-family="monospace" font-size="18" font-weight="bold">{title}</text>
{"".join(box(c) for c in components)}
{"".join(arrow(conn) for conn in connections)}
</svg></body></html>"""

  with open(output, "w") as f:
    f.write(html)
  print(f"Saved {output} — open in browser")

# Example: 3-tier web app
make_diagram("Web Application Architecture",
  components=[
    {"id":"browser",  "label":"Browser",    "x":50,  "y":100, "color":"#1a4731"},
    {"id":"nginx",    "label":"Nginx",       "x":280, "y":100, "color":"#1e3a5f"},
    {"id":"api",      "label":"FastAPI",     "x":510, "y":100, "color":"#1e3a5f"},
    {"id":"postgres", "label":"PostgreSQL",  "x":510, "y":220, "color":"#3d1c4f"},
    {"id":"redis",    "label":"Redis Cache", "x":280, "y":220, "color":"#4f2a0a"},
  ],
  connections=[
    {"from_id":"browser",  "to_id":"nginx",    "label":"HTTPS"},
    {"from_id":"nginx",    "to_id":"api",      "label":"proxy"},
    {"from_id":"api",      "to_id":"postgres", "label":"SQL"},
    {"from_id":"api",      "to_id":"redis",    "label":"cache"},
  ]
)
3. Add a group/layer box

To show layers (Frontend / Backend / Data), add a background rect before component boxes:

python
layer_rect = '<rect x="30" y="80" width="220" height="200" rx="12" fill="none" stroke="#334155" stroke-width="1" stroke-dasharray="6,3"/><text x="40" y="72" fill="#64748b" font-family="monospace" font-size="12">Frontend</text>'

Examples

"Draw a microservices architecture with API gateway, 3 services, and a database" → Use step 2 with 5 components (gateway, service1/2/3, db) and arrows showing request flow.

"Create a data pipeline diagram: raw data → ETL → warehouse → BI tool" → Use step 2 with a horizontal layout, 4 boxes, connecting arrows with labels for each transform step.

"Visualize a CI/CD pipeline from git push to production" → Components: GitHub, CI Runner, Test Suite, Docker Build, Registry, Deploy → Prod. Horizontal flow.

Cautions

  • Keep diagrams to 10-15 components maximum — more than that becomes unreadable
  • Plan x/y coordinates before writing code — use 250px horizontal spacing and 120px vertical spacing as defaults
  • Arrows pointing left or upward require reverse x1/x2 coordinates — adjust from_id/to_id if arrows cross
  • SVG is resolution-independent — the output will look sharp at any zoom level

© taracodlabs, 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 1 other file in skills/architecture-diagram of taracodlabs/aiden.

  • SKILL.md
  • skill.json

Open the folder on GitHubat commit 3704204

Compare with similar skills

HTML Architecture Diagram Maker 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.

HTML Architecture Diagram Maker compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Architecture Diagram Maker this skilltaracodlabs/aiden852—~1.3kAutomated safety check: PassApache-2.0
Senior Architect Toolkitmaslennikov-ig/claude-code-orchestrator-kit2608 repos~1.2kAutomated safety check: NotesCustom licence
Code Graph Mermaid Diagramstrailofbits/skills7.5k—~1.7kAutomated safety check: PassCC-BY-SA-4.0
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid1761 repos~5.6kAutomated safety check: PassNone
VisiomasterRss3208/Visiomaster822—~15kAutomated safety check: PassMIT
Archscribelazypay/Archscribe359—~1.9kAutomated safety check: PassMIT

Similar skills

  • Senior Architect Toolkit

    maslennikov-ig/claude-code-orchestrator-kit

    Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin…

    260 GitHub starsUsed in 8 repos~1.2k tokens
    DevelopmentAuto-check: notes

  • Code Graph Mermaid Diagrams

    trailofbits/skills

    Official

    Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.

    7.5k GitHub stars~1.7k 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

  • Visiomaster

    Rss3208/Visiomaster

    Windows-first Visio diagram reconstruction workflow for flowcharts, architecture diagrams, and paper-style module figures.

    822 GitHub stars~15k tokensUpdated 26 days ago
    DevelopmentAuto-check passed

  • Archscribe

    lazypay/Archscribe

    Create premium hand-drawn architecture, workflow, and swimlane diagrams in a dark neon or light paper style, with editable Excalidraw sources, PNG/SVG previews, animated GIF/MP4 output, and…

    359 GitHub stars~1.9k tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

  • Drawio Diagram Builder

    Will-hxw/drawio-diagram-builder

    Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams.

    413 GitHub stars~5.9k tokensUpdated 3 mo ago
    DevelopmentAuto-check passed

More from taracodlabs/aiden

All 63 skills in this repo

  • Google Flights Search

    taracodlabs/aiden

    Searches Google Flights for prices, schedules and availability through browser automation with URL-based queries, and stops short of booking.

    852 GitHub stars~1.5k tokensUpdated 27 days ago
    Auto-check passed

  • OpenAI Codex CLI Bridge

    taracodlabs/aiden

    Delegates code generation, editing and explanation tasks to the OpenAI Codex CLI, with commands for interactive, auto-edit, question-only and model-specific runs.

    852 GitHub starsUsed in 1 repo~826 tokens
    Auto-check passed

  • Google Hotels Search

    taracodlabs/aiden

    Searches Google Hotels through the agent-browser tool for prices, ratings, amenities and availability, building a search URL from the location and dates and reporting a results table.

    852 GitHub stars~1.5k tokensUpdated 27 days ago
    Auto-check passed

  • Indian Broker Portfolio Bridge

    taracodlabs/aiden

    Aggregates holdings across Zerodha, Upstox and Angel One and normalizes order parameters into one format, with confirmation required before any routing.

    852 GitHub stars~1.1k tokensUpdated 27 days ago
    Auto-check passed

  • arXiv Paper Search

    taracodlabs/aiden

    Searches arXiv by keyword, category, author or paper ID through its public API and downloads PDFs, with no API key needed.

    852 GitHub stars~1k tokensUpdated 27 days ago
    Auto-check passed

  • ASCII Art Banners

    taracodlabs/aiden

    Produces ASCII text banners, cowsay-style speech bubbles and bordered boxes for terminal scripts, READMEs and CLI splash screens with pyfiglet, cowsay and boxes.

    852 GitHub stars~985 tokensUpdated 27 days ago
    Auto-check passed

Works with

Categories

Questions about HTML Architecture Diagram Maker

What does HTML Architecture Diagram Maker do?

Generates dark-themed architecture, component, data-flow and network diagrams as self-contained HTML and SVG files that open in any browser. Diagrams come out as a single HTML file with inline SVG, so nothing else needs to be installed and the result can be opened and shared from a browser. The skill targets architecture, component interaction, data flow or pipeline and network topology diagrams, all in a dark theme.

When should I use HTML Architecture Diagram Maker?

HTML Architecture Diagram Maker fits situations like: drawing a system or microservices architecture to share in a browser; showing how data moves through a pipeline from source to warehouse to BI tool; mapping a CI/CD flow from commit to production as a diagram.

How do I install HTML Architecture Diagram Maker in Claude Code?

Run `npx skills add taracodlabs/aiden --skill architecture-diagram -a claude-code`. Or copy the skill folder (skills/architecture-diagram in taracodlabs/aiden) into .claude/skills/architecture-diagram in your project. Claude Code loads it when a task matches its description.

How do I install HTML Architecture Diagram Maker in Codex?

Run `npx skills add taracodlabs/aiden --skill architecture-diagram -a codex`. Or copy the skill folder (skills/architecture-diagram in taracodlabs/aiden) into .agents/skills/architecture-diagram in your project. Codex loads it when a task matches its description.

Can I use HTML Architecture Diagram Maker 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 taracodlabs/aiden --skill architecture-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-diagram, .gemini/skills/architecture-diagram, .github/skills/architecture-diagram and .opencode/skills/architecture-diagram in your project.

What does HTML Architecture Diagram Maker need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Architecture Diagram Maker is instructions for the agent only. Our summary lists: Python to run the diagram generator snippet.

Does HTML Architecture Diagram Maker access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is HTML Architecture Diagram Maker 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 HTML Architecture Diagram Maker use?

HTML Architecture Diagram Maker is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Architecture Diagram Maker use?

About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HTML Architecture Diagram Maker?

Skills that share tags, products or a category with HTML Architecture Diagram Maker: Senior Architect Toolkit (maslennikov-ig/claude-code-orchestrator-kit, 260 stars), Code Graph Mermaid Diagrams (trailofbits/skills, 7.5k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 176 stars) and Visiomaster (Rss3208/Visiomaster, 822 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Architecture Diagram Maker?

taracodlabs (a GitHub organization) maintains it in taracodlabs/aiden, which has 852 GitHub stars. The repository holds 63 skills in this directory. The repository was last updated on September 13, 2026.

Source: taracodlabs/aiden on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.