baoyu-diagram
FeaturedCreate professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.
Install
Quality Score: 87/100
Skill Content
Details
- Author
- JimLiu
- Repository
- JimLiu/baoyu-skills
- Created
- 8 months ago
- Last Updated
- today
- Language
- TypeScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
baoyu-diagram
Create clear, reproducible diagrams for architecture, flow, sequence, structure, state, and conceptual relationships. Use whenever the user asks for 架构图、流程图、关系图、状态图、decision tree、diagram or any visual representation of structure/logic/process. For public-account and non-technical audiences, default to a low-complexity editorial theme with Mermaid source plus SVG/PNG; use the legacy dark technical SVG style only when the user explicitly wants it.
svg-diagram
手写 SVG 绘制生产级技术图表。当用户要求画图、绘制流程、展示数据流转、画时序图、 画架构图、解释概念、绘制任何可视化图表时必须使用本 skill。 Production-grade hand-written SVG diagrams. Use when users request diagrams, flowcharts, architecture diagrams, sequence diagrams, data flow, concept visualization, ERDs. Supports: sequence, flowchart, structure, ERD, interactive, illustrative, state machine, timeline. Dark mode support, semantic colors, better than Mermaid. Triggers: 画图 绘图 时序图 流程图 架构图 数据流 示意图 可视化 ER图 状态机 时间线 生命周期 里程碑 diagram flowchart sequence architecture visualize ERD state-machine timeline lifecycle milestone.
diagram-concept
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software/cloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.