Borrowing it
Nothing to install: this file belongs to Fioooooooo/FylloCode. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/Fioooooooo/FylloCode/main/.agents/skills/diagram-design/SKILL.mdgit clone --depth 1 https://github.com/Fioooooooo/FylloCodeWrote 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.
[](https://agentmods.dev/skills/fioooooooo/fyllocode/diagram-design)<a href="https://agentmods.dev/skills/fioooooooo/fyllocode/diagram-design"><img src="https://agentmods.dev/badge/skills/fioooooooo/fyllocode/diagram-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/fioooooooo/fyllocode/diagram-design"><img src="https://agentmods.dev/badge/skills/fioooooooo/fyllocode/diagram-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00188 | $0.10472 |
| Opus 5 | $0.00094 | $0.05236 |
| Sonnet 5 | $0.00038 | $0.02094 |
| Haiku 4.5 | $0.00019 | $0.01047 |
Grade A, and why
diagram-design 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 9d 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.
This is a copy
91% identical to diagram-design — 337 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 589 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Diagram Design
Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.
Thirty-nine visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from references/ only when selected.
0. First-time setup — style guide gate
Before generating your first diagram in a new project, verify the style guide has been customized.
Don't silently ship default-skinned diagrams into a branded project.
First check the project root for a .diagram-design marker and resolve it per references/profiles.md. A valid marker whose profile exists selects that file directly and skips this gate; profile: default also skips it. A malformed or missing-profile marker follows the visible failure handling in that reference. Never copy a marker-selected profile over the installed working copy.
Open references/style-guide.md and check the default tokens. If they're still the shipped defaults (paper #f5f5f5, ink #2d3142, accent #eb6c36 atomic-tangerine), pause and ask the user:
"This is your first diagram in this project. The style guide is still at the default (neutral white-smoke + atomic-tangerine). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now, (f) load a saved client profile."
Then branch per the matching section of references/onboarding.md; for (f) follow references/profiles.md.
Once the style guide has been customized (or the user explicitly opted for default), skip this gate on subsequent runs. A leading profile header names the copied-in active profile. Without a header, any semantic-role value or typography family differing from shipped defaults means custom-unsaved: skip the gate and offer to save it as a profile. All-default tokens with no marker/header trigger the gate. At the end of every onboarding method, offer to save the result as a named client profile per references/profiles.md.
What ships with it
60 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.
- assets/example-architecture-dark.html 17 KB
- assets/example-architecture-full.html 22 KB
- assets/example-architecture.html 17 KB
- assets/example-bar-dark.html 13 KB
- assets/example-bar-full.html 17 KB
- assets/example-bar.html 12 KB
- assets/example-bubble-dark.html 15 KB
- assets/example-bubble-full.html 21 KB
- assets/example-bubble.html 15 KB
- assets/example-data-flow-dark.html 15 KB
- assets/example-data-flow-full.html 19 KB
- assets/example-data-flow.html 15 KB
- assets/example-datalake-dark.html 33 KB
- assets/example-datalake-full.html 39 KB
- assets/example-datalake.html 35 KB
- assets/example-db-schema-dark.html 36 KB
- assets/example-db-schema-full.html 43 KB
- assets/example-db-schema.html 36 KB
- assets/example-dependency-dark.html 26 KB
- assets/example-dependency-full.html 32 KB
- assets/example-dependency.html 25 KB
- assets/example-deployment-dark.html 19 KB
- assets/example-deployment-full.html 25 KB
- assets/example-deployment.html 19 KB
- assets/example-dp-integration-dark.html 19 KB
- assets/example-dp-integration-full.html 23 KB
- assets/example-dp-integration.html 19 KB
- assets/example-dp-security-matrix-dark.html 13 KB
- assets/example-dp-security-matrix-full.html 16 KB
- assets/example-dp-security-matrix.html 13 KB
- assets/example-er-dark.html 19 KB
- assets/example-er-full.html 25 KB
- assets/example-er.html 19 KB
- assets/example-fishbone-dark.html 12 KB
- assets/example-fishbone-full.html 16 KB
- assets/example-fishbone.html 11 KB
- assets/example-flowchart-dark.html 13 KB
- assets/example-flowchart-full.html 17 KB
- assets/example-flowchart.html 12 KB
- assets/example-gantt-dark.html 14 KB
- assets/example-gantt-full.html 17 KB
- assets/example-gantt.html 13 KB
- assets/example-high-level-dark.html 33 KB
- assets/example-high-level-full.html 40 KB
- assets/example-high-level-vertical-dark.html 34 KB
- assets/example-high-level-vertical-full.html 42 KB
- assets/example-high-level-vertical.html 40 KB
- assets/example-high-level.html 36 KB
- assets/example-import-drawio.html 17 KB
- assets/example-import-mermaid.html 12 KB
- assets/example-it-state-dark.html 15 KB
- assets/example-it-state-full.html 19 KB
- assets/example-it-state.html 16 KB
- assets/example-journey-dark.html 13 KB
- assets/example-journey-full.html 17 KB
- assets/example-journey.html 12 KB
- assets/example-kanban-dark.html 15 KB
- assets/example-kanban-full.html 20 KB
- assets/example-kanban.html 15 KB
- assets/example-layers-dark.html 9.1 KB
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.
- 9d ago First seen · 589 lines · 188 tokens per session scan A 55ebc5bc0f13
diagram-design is a skill published in the GitHub repository Fioooooooo/FylloCode (29 stars, last pushed 3d ago), licensed MIT. It adds 188 tokens to every session and 10,472 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. It is 91% identical to diagram-design, differing in 337 lines, and is treated as a copy.
Other skills, from other repositories
create-backchat-theme
Create, modify, or validate Backchat color-theme plugins and migrate frontend visual values into the semantic theme-token contract. Use when a user asks for a Backchat skin, theme, color scheme, editor-style appearance pack, theme preview, or tokenization work under openma-desktop.
desktop-brand-builder
Generate a branded Qwen Code desktop package from the Tauri desktop shell using a minimal brandId and logo. Use when the user wants a custom, white-label, or rebranded desktop client, installer, DMG/EXE/AppImage/deb, or one-click brand build on top of packages/desktop-shell.
frontend-design-landing-page
Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds…
build-teaql-app
Build or change a TeaQL application in Java, Rust, Go, Swift, Python, C#/.NET, or TypeScript, including Kotlin/JVM applications that consume Java-generated libraries. Mandatory order: first draft and save a complete KSML model, then verify the client and evaluate that saved model, repair it through repeated evaluation…
infographics
Create professional infographics using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Integrates research-lookup and web search for accurate data. Supports 10 infographic types, 8 industry styles, and colorblind-safe palettes.
figma-implement-design
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a…