tech-diagram

tech-diagram is a skill for Claude Code from desirecore/market. It costs 210 tokens per session (2,523 once invoked), scanned A, original, MIT.

A set of instructions for turning a written technical description into a Mermaid diagram, a text format that can render diagrams as images.

In plain words
What is it for?
Use it for architecture diagrams, flowcharts, sequence diagrams, state machines, entity-relationship diagrams, class diagrams, and mind maps.
Why use it?
It gives diagrams a consistent structure and visual style instead of requiring the agent to design each diagram format from scratch.

Skill for Claude Code

Written for Claude Code: disable-model-invocation in frontmatter.

Good fit Use it for architecture diagrams, flowcharts, sequence diagrams, state machines, entity-relationship diagrams, class diagrams, and mind maps.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/desirecore/market/tech-diagram
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add desirecore/market --skill tech-diagram
Clone the repo
git clone --depth 1 https://github.com/desirecore/market

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for tech-diagram

README.md
[![agentmods](https://agentmods.dev/badge/skills/desirecore/market/tech-diagram.svg)](https://agentmods.dev/skills/desirecore/market/tech-diagram)
Your own site
<a href="https://agentmods.dev/skills/desirecore/market/tech-diagram"><img src="https://agentmods.dev/badge/skills/desirecore/market/tech-diagram.svg" alt="Measured on agentmods" height="20"></a>
Per session 210 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,523 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00210 $0.02523
Opus 5 $0.00105 $0.01262
Sonnet 5 $0.00042 $0.00505
Haiku 4.5 $0.00021 $0.00252

Measured 6d ago against content hash b97b6857a258, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-07, from the pricing page.

Security

Grade A, and why

tech-diagram scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/tech-diagram/SKILL.md · 182 lines

How it starts

The opening of the file, as written. The whole thing — 182 lines — stays where its author put it; the contents beside it link to each section on GitHub.

tech-diagram Skill

Turn a natural-language description into a polished technical diagram. You write Mermaid in your reply; the DesireCore chat renders it inline as SVG. The point of this skill is consistency: a fixed semantic shape/arrow vocabulary plus a set of six self-contained visual styles (default brand-light), so every diagram is coherent and on-style.

When to Use

Use this skill for diagrams of structure, flow, or relationships: architecture, flowchart, sequence, state machine, ER, class diagram, mind map.

Do NOT use it for photographic or illustrative pictures — route those to an image-generation skill (e.g. dashscope-image-gen, minimax-image-gen).

Mandatory Style Rules

These are non-negotiable. Violating them produces off-brand or unrendered diagrams.

  1. Every diagram MUST start with a style's %%{init}%% directive (it overrides the chat's hardcoded-dark global theme). Default to brand-light unless the user asks for another (see Styles below). The presets in references/styles.md are full flowchart skeletons (%%{init}%% + flowchart TD + five classDefs): for a flowchart, paste the whole block; for any other type (sequenceDiagram / stateDiagram-v2 / erDiagram / classDiagram / mindmap), copy only the first %%{init}%% line — the flowchart TD + classDef block is flowchart-specific and the %%{init}%% line alone gives them the style's canvas and font.
  2. In a flowchart, color every node via the five classDefs, never with ad-hoc hex (other diagram types just inherit the style's %%{init}%% canvas + font; the classDef block is flowchart-specific). The class names — agent / system / biz / warn / error — are identical across all styles, so the flowchart body never changes when the style does. Pick a node's class by its role: system/generic → system, knowledge/learning → agent, business/execution → biz, project-management/warning/decision → warn, error/failure → error.
  3. Use the semantic shapes below, not arbitrary ones.
  4. Quote any node label that contains punctuation, parentheses, or / to avoid Mermaid parse errors, e.g. A["Query / Retrieve"].

Read the full file on GitHub · 182 lines

Files

What ships with it

5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago First seen · 182 lines · 210 tokens per session scan A b97b6857a258

Subscribe to this mod's changes

tech-diagram is a skill published in the GitHub repository desirecore/market (2 stars, last pushed today), licensed MIT. It adds 210 tokens to every session and 2,523 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

diagram-creator

Create professional diagrams using Mermaid, PlantUML, and other text-based diagram tools. Generate flowcharts, sequence diagrams, architecture diagrams, and more.

claude-office-skills/skills · 34 tokens

code-to-diagram

Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts. Uses AST parsing to map import dependencies for Python, JS/TS, Go, and Java, outputting Mermaid or SVG files. Triggered when users ask to visualize code architecture, understand dependencies, draw a flowchart, or create a…

serejaris/kimi-skills · 74 tokens

code-to-diagram

Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts. Uses AST parsing to map import dependencies for Python, JS/TS, Go, and Java, outputting Mermaid or SVG files. Triggered when users ask to visualize code architecture, understand dependencies, draw a flowchart, or create a…

zebbern/claude-code-guide · 74 tokens

mermaid-diagram

Use this skill when you need to draw diagrams including: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, User Journey, Gantt Chart, Pie Chart, Quadrant Chart, Requirement Diagram, Gitgraph, Mindmap, Timeline, Sankey, XY Chart (Bar/Line), Block Diagram, Packet Diagram, Kanban, Architecture…

wecode-ai/Wegent · 102 tokens

aws-architecture-diagram

AWS architecture diagrams — generate visual network topology diagrams from live AWS infrastructure. Use when drawing AWS network diagrams, visualizing VPCs, mapping Transit Gateway topology, or generating architecture documentation.

automateyournetwork/netclaw · 43 tokens

fin-arch-diagram

A tool for creating architecture diagrams, process flowcharts, and hierarchy trees. These show how system parts, business steps, decisions, or organizational levels relate to one another.

csmar432/finai-research · 72 tokens