agentmods.dev

fec-drawio-studio

fec-drawio-studio is a skill for Claude Code from bovinphang/frontend-craft. It costs 154 tokens per session (1,764 once invoked), scanned A, original, MIT.

An editable workflow for making technical diagrams in draw.io (also called diagrams.net), with the original .drawio file saved alongside exported images or documents. It covers architecture, database, UML, sequence, flow, machine-learning, and code-structure diagrams.

In plain words
What is it for?
Use it to create, validate, lay out, and export diagrams, including diagrams with official vendor or cloud symbols and automatically arranged graphs.
Why use it?
It keeps diagrams changeable and reviewable instead of leaving only a flat image. It also helps choose between Mermaid, draw.io, and other diagram formats based on the job.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the frontend-craft plugin — 56 skills, 11 commands, 14 agents, 5 hooks, 6 MCP servers shipped together

not rated 21repo 9d ago A scan SkillSpector: pass 154 tokens original MIT

Good fit Use it to create, validate, lay out, and export diagrams, including diagrams with official vendor or cloud symbols and automatically arranged graphs.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/bovinphang/frontend-craft/fec-drawio-studio
View source ↗ bovinphang/frontend-craft
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 bovinphang/frontend-craft --skill fec-drawio-studio
Clone the repo
git clone --depth 1 https://github.com/bovinphang/frontend-craft

Made for: Claude Code.

Or install frontend-craft, the plugin that ships this one along with the rest of its 56 skills, 11 commands, 14 agents, 5 hooks, 6 MCP servers.

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 fec-drawio-studio

README.md
[![agentmods](https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-drawio-studio/github.svg)](https://agentmods.dev/skills/bovinphang/frontend-craft/fec-drawio-studio)
Your own site
<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-drawio-studio"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-drawio-studio/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.

agentmods 80×15 button for fec-drawio-studio

Your own site · 80×15
<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-drawio-studio"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-drawio-studio.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 154 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,764 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. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.00154 $0.01764
Opus 5 $0.00077 $0.00882
Sonnet 5 $0.00031 $0.00353
Haiku 4.5 $0.00015 $0.00176

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

Security

Grade A, and why

fec-drawio-studio 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 10d ago.

The scan reads SKILL.md. This mod also ships 14 executable files (scripts/brand-symbols.mjs, scripts/diagram-lint.mjs, scripts/diagram-url.mjs, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

localized/zh-CN/skills/fec-drawio-studio/SKILL.md · 74 lines

How it starts

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

可编辑技术图表工作流

用途

生成、校验和导出可继续编辑的 draw.io / diagrams.net 技术图表。

流程

  1. 判断图表路线

    • 需要长期维护在 Markdown 中的简单图，优先 Mermaid。
    • 需要官方图标、泳道、复杂布局、层/标签/元数据、可编辑 PNG/SVG/PDF 或 .drawio 源时，使用本工作流。
    • 需要快速浏览器打开或分享时，用 diagram-url.mjs 生成 URL；需要本地可审计交付时，始终保存 .drawio 源。
    • 用户已经有 Mermaid 或 CSV 内容时，可用 diagram-url.mjs --create --type mermaid|csv 交给 diagrams.net 导入；需要长期维护或精确形状时，再转成 XML。
    • 如果当前宿主已经配置 draw.io MCP App/Tool，可把它作为预览或编辑入口；本 skill 不要求安装 MCP server。
    • 需要照片、海报、视觉概念或位图编辑时，走图片生成路线。

  2. 建立图表规格

    • 明确图表类型、受众、输出格式、节点清单、关系、层级分组和保存位置。
    • 用户指定 Flowchart、Architecture、Sequence、UML Class、ERD、Mindmap、Network Topology 或 ML/DL 图表时，读取 diagram-patterns.md。
    • 对需要在 diagrams.net 中清晰打开的流程、工作流、审批、发布或事故响应流程图，还要读取 flowchart-quality.md。
    • 需要选择 XML、Mermaid、CSV、容器、层、标签、metadata 或暗色模式策略时，读取 xml-and-mermaid.md。
    • 需要特定厂商/云/网络/流程图形状时，运行 shape-query.mjs；需要 AI、数据库或基础设施品牌符号时，运行 brand-symbols.mjs。

  3. 生成 .drawio 源

    • 小图可手工生成 draw.io XML；当直接推理节点坐标、尺寸和连线更清楚时，优先保持显式布局。
    • 超过约 15 个节点、依赖图或代码结构图时，先生成 graph JSON，再用 layout-graph.mjs 自动布局。
    • 手工摆放 XML 时，将坐标对齐到 10px 网格，保持同级节点之间有充足间距，使用 whiteSpace=wrap;html=1，默认优先 fontSize=14，强制换行写作 &#xa;，并让容器按内容收紧，避免单侧大面积空白。
    • 手工流程图保持 pageWidth 在易读的 600-800 范围内，除非明确是横向跨职能表；真实阶段使用泳道容器，循环或回滚边通过边距和显式 waypoint 绕行。
    • 代码结构图可先用 scan-js-modules.mjs、scan-ts-modules.mjs、scan-python-modules.mjs、scan-go-packages.mjs、scan-rust-modules.mjs 或 scan-python-classes.mjs 生成 graph JSON。

  4. 校验和预览

    • 每次生成 .drawio 后运行： 
      node skills/fec-drawio-studio/scripts/diagram-lint.mjs diagram.drawio --format markdown
    • 若本机有 draw.io desktop CLI，导出预览 PNG 时不要嵌入 XML，并控制宽度： 
      node skills/fec-drawio-studio/scripts/drawio-export.mjs diagram.drawio --format png --output diagram.png --width 2000
    • 若 CLI 不可用，用 diagram-url.mjs 生成 diagrams.net viewer/editor URL；严格离线或数据驻留敏感时先读取 data-residency.md。

Read the full file on GitHub · 74 lines

Files

What ships with it

27 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. 10d ago First seen · 74 lines · 154 tokens per session scan A 083def9da1e3

Subscribe to this mod's changes

fec-drawio-studio is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 9d ago), licensed MIT. It adds 154 tokens to every session and 1,764 once invoked, about $0.0008 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-30.

Claude CodeCode reviewData and AILocalizationclaude-code-pluginclaude-code-skillscodexcursor
Related

Other skills, from other repositories

pocket-development

Use when executing implementation plans of one or more tasks. Trigger on execute plan, delegate tasks, dispatch subagents. Combines delegate handoff discipline with prompt-engineering attention mechanics.

rfxlamia/pocketto · 40 tokens

pocket-pitching

Pre-grinding problem exploration. Use BEFORE pocket-grinding when the problem is unformed or needs exploration. Guides diverge→converge with structured brainstorming methods and LLM-to-LLM curation (advisor tool), then produces a pitch exploration doc. Trigger on "pocket-pitching", "pitch this", "explore this idea"…

rfxlamia/pocketto · 108 tokens

brand-design

Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…

rfxlamia/pocketto · 146 tokens

add-ai-webapi

Integrates Power Pages generative-AI summarization APIs (PREVIEW) into a Single Page Application (SPA) site — the Search Summary API and the Data Summarization API — on any record-detail or list page. Generates per-target service code (CSRF-handled) and AI site settings; delegates Web API settings, table permissions…

microsoft/power-platform-skills · 226 tokens

triage

Triage review findings interactively — approve, skip, or prioritize each issue. Use after /phx:review to filter findings before fixing.

oliver-kriska/claude-elixir-phoenix · 32 tokens

great_cto

Use when the CTO describes a feature, task, or project goal. Orchestrates the full SDLC pipeline automatically based on project type.

avelikiy/great_cto · 32 tokens