fec-drawio-studio

Generate, validate, and export editable draw.io diagrams as .drawio files.

21|3|Updated Mar 17, 2026
One-click install
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-drawio-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fec-drawio-studio
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-drawio-studio
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-drawio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

通过集中、可编辑的 draw.io/diagrams.net 工作流,帮助团队在前端架构、流程和数据流程图等场景生成、校验与导出一致、可维护的图表源。

Core Features & Use Cases

  • 生成、校验和导出可继续编辑的 draw.io 源文件(.drawio),支持本地审查与离线交付。
  • 提供图表模式、布局约束、品牌符号、官方形状检索等资源,确保图表风格与约定的一致性。
  • 支持离线优先工作流:lint 图表、导出 PNG/SVG/PDF、以及 diagrams.net URL 回退用于离线或受限网络环境。

Quick Start

Generate a .drawio source, lint it locally, and export PNG/SVG/PDF as needed.

Frequently Asked Questions about fec-drawio-studio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate and export editable draw.io diagrams for offline workflows?

To generate editable draw.io diagrams offline, create a .drawio source file, lint it locally for structural consistency, and export it to PNG, SVG, or PDF without needing network access. The source remains fully editable for future revisions.

Can I lint draw.io architecture diagrams locally for consistency before sharing?

Yes, you can lint draw.io architecture diagrams locally to validate diagram patterns, layout constraints, and brand symbols. This ensures your frontend architecture and ERD visuals maintain consistent style and conventions before team distribution.

What diagram types are supported by the draw.io standardization workflow?

The draw.io standardization workflow supports frontend architecture diagrams, ERDs, UML, flowcharts, data workflows, and ML-symbol-heavy visuals. It generates editable .drawio sources that retain local layout constraints and official shape references.

Does the draw.io export workflow work in restricted network environments?

Yes, the draw.io export workflow supports restricted network environments by using diagrams.net URL fallbacks for offline access. You can validate, export, and retain local source files entirely without continuous internet connectivity.

How do I retain editable .drawio source files after exporting to PNG or SVG?

When you export draw.io diagrams to PNG or SVG, the workflow automatically retains the local .drawio source file. This ensures your diagrams remain fully editable for future updates while delivering final visual assets.

What's the best way to standardize team diagram styles using diagrams.net?

The best way to standardize team diagrams.net styles is by applying shared diagram patterns, layout constraints, and official shape retrieval resources. This enforces consistent visual conventions across frontend architecture and data workflow diagrams.