awesome-copilot 的 draw.io 形状库完全指南内置库、样式字符串与自定义库实战【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot本指南以 shape-libraries.md 为核心骨架系统讲解 draw.io 内置形状库General、Flowchart、UML、ER、Network、BPMN、Mockup、Kubernetes的启用方式、每种形状的精确 style 字符串、类图/ER 图/时序图的 XML 落地示例以及自定义形状库的创建格式同时结合本仓库 draw-io-diagram-generator skill 的模板、校验与形状插入脚本进行源码级佐证帮助你在 VS Code 中一键生成、校验并交付可直接打开渲染的.drawio文件。在 awesome-copilot 仓库的 draw-io-diagram-generator skill 中references/shape-libraries.md是生成一切图形的弹药库它记录了 draw.io 编辑器含 VS Code 内嵌版本所有内置形状库的启用入口、形状与样式字符串的对应关系以及自定义形状库的 XML 格式。无论你要画流程图、UML 类图、ER 数据模型、网络拓扑、BPMN 业务流程还是 Kubernetes 架构图都可以直接从该文档中复制精确的 style 字符串避免形状渲染不出来这类低级错误。读完本文你将能够在 draw.io 编辑器中按需启用任意内置形状库使用shapemxgraph.*前缀写出各类图元的精确样式手工编写并加载自定义形状库文件。形状库是什么一切从View Shapes开始形状库Shape Library是 draw.io 中按主题聚合的图元集合。内置库随编辑器内置不需要额外安装只需在编辑器中启用即可桌面 / Web 版 draw.io通过View Shapes打开形状面板勾选要激活的库VS Code 中内嵌的 draw.iohediet.vscode-drawio扩展形状库同样通过编辑器内部的形状面板启用详见后文在 VS Code 中启用形状库一节。启用后图元会出现在左侧形状面板中支持拖拽到画布使用。每个形状在底层 mxGraph XML 中都对应一条style字符串例如shapecylinder3;表示数据库圆柱体。手工生成.drawio文件时我们正是通过把这些 style 字符串写入mxCell style...来画出对应形状的因此掌握形状库与 style 字符串的对应关系是直接编写而非鼠标拖拽draw.io 文件的前提。关联阅读style-reference.md 给出了全部 style 键的取值与默认值drawio-xml-schema.md 给出了mxCell/mxGeometry的完整属性参考。内置形状库全景目录以下是shape-libraries.md记录的 8 大类内置形状库。每个库都注明启用入口形状表给出 Style Key / Style String 与用途可直接用于编写mxCell style...。General 通用库默认激活启用方式默认始终激活无需额外操作。适用于任意图表的通用图元。形状Style Key用途Rectangle 矩形(默认无需 key)盒子、步骤、组件Rounded Rectangle 圆角矩形rounded1;更柔和的流程框Ellipse 椭圆ellipse;状态、开始/结束Triangle 三角形triangle;箭头、门Diamond 菱形rhombus;决策Hexagon 六边形shapehexagon;标签、技术图标Cloud 云shapecloud;云服务Cylinder 圆柱shapecylinder3;数据库Note 便签shapenote;注解Document 文档shapedocument;文件Arrow shapes 箭头类各类mxgraph.arrows2.*流向指示Callouts 气泡shapecallout;对话气泡、旁白Flowchart 流程图库ANSI/ISO 标准符号启用方式View Shapes Flowchart形状前缀mxgraph.flowchart.符号Style StringANSI 名称开始 / 结束ellipse;Terminal 终端处理矩形rounded1;Process 处理决策rhombus;Decision 决策I/O平行四边形shapemxgraph.flowchart.io;Data 数据预定义处理shapemxgraph.flowchart.predefined_process;Predefined Process 预定义处理人工操作shapemxgraph.flowchart.manual_operation;Manual Operation 人工操作人工输入shapemxgraph.flowchart.manual_input;Manual Input 人工输入数据库shapemxgraph.flowchart.database;Direct Access Storage 直接访问存储文档shapemxgraph.flowchart.document;Document 文档多文档shapemxgraph.flowchart.multi-document;Multiple Documents 多文档页内连接符ellipse;小尺寸 30×30Connector 连接符页外连接符shapemxgraph.flowchart.off_page_connector;Off-page Connector 页外连接符准备shapemxgraph.flowchart.preparation;Preparation 准备延迟shapemxgraph.flowchart.delay;Delay 延迟显示shapemxgraph.flowchart.display;Display 显示内部存储shapemxgraph.flowchart.internal_storage;Internal Storage 内部存储排序shapemxgraph.flowchart.sort;Sort 排序抽取shapemxgraph.flowchart.extract;Extract 抽取合并shapemxgraph.flowchart.merge;Merge 合并或shapemxgraph.flowchart.or;Or 或注解shapemxgraph.flowchart.annotation;Annotation 注解卡片shapemxgraph.flowchart.card;Punched Card 穿孔卡片完整流程图示例 style 字符串whiteSpacewrap;html1;保证文字换行且支持 HTML 标签Process: rounded1;whiteSpacewrap;html1; Decision: rhombus;whiteSpacewrap;html1; Start/End: ellipse;whiteSpacewrap;html1; Database: shapemxgraph.flowchart.database;whiteSpacewrap;html1; Document: shapemxgraph.flowchart.document;whiteSpacewrap;html1; I/O (Data): shapemxgraph.flowchart.io;whiteSpacewrap;html1;在仓库的 flowchart.drawio 模板中这些样式被组合成了完整的Start → Step → Decision → Yes/No 分支 → End结构开始节点用ellipse;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366;绿色语义色决策节点用rhombus;...fillColor#fff2cc;strokeColor#d6b656;黄色警告色Yes 分支与 No 分支分别使用绿色和红色语义色连线统一使用edgeStyleorthogonalEdgeStyle;html1;。这套配色与连线约定与 SKILL.md 第 5 步给出的语义色板完全一致。UML 库用例图、类图、组件图、时序图、状态图启用方式View Shapes UML用例图Use Case Diagrams形状Style StringActor 参与者shapemxgraph.uml.actor;whiteSpacewrap;html1;用例椭圆ellipse;whiteSpacewrap;html1;系统边界swimlane;startSize30;whiteSpacewrap;html1;类图Class Diagrams——swimlane 容器方案类框使用swimlane 容器承载属性与方法分隔线是容器内部的零高度线条元素#xa;为 XML 转义后的换行符!-- Class container -- mxCell value«interface»#xa;IOrderService styleswimlane;fontStyle1;aligncenter;startSize30;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x200 y100 width200 height160 asgeometry / /mxCell !-- Attributes (child of class) -- mxCell value id: string#xa; status: string styletext;strokeColornone;fillColornone;alignleft;verticalAligntop;spacingLeft4;overflowhidden;html1; vertex1 parentclassId mxGeometry y30 width200 height60 asgeometry / /mxCell !-- Method separator line -- mxCell value styleline;strokeWidth1;fillColornone; vertex1 parentclassId mxGeometry y90 width200 height10 asgeometry / /mxCell !-- Methods (child of class) -- mxCell value create(): Order#xa; cancel(): void styletext;strokeColornone;fillColornone;alignleft;verticalAligntop;spacingLeft4;overflowhidden;html1; vertex1 parentclassId mxGeometry y100 width200 height60 asgeometry / /mxCellUML 关系箭头关系Style String继承extendsedgeStyleorthogonalEdgeStyle;html1;endArrowblock;endFill0;实现implementsedgeStyleorthogonalEdgeStyle;dashed1;html1;endArrowblock;endFill0;关联AssociationedgeStyleorthogonalEdgeStyle;html1;endArrowopen;endFill0;依赖DependencyedgeStyleorthogonalEdgeStyle;dashed1;html1;endArrowopen;endFill0;聚合AggregationedgeStyleorthogonalEdgeStyle;html1;startArrowdiamond;startFill0;endArrownone;组合CompositionedgeStyleorthogonalEdgeStyle;html1;startArrowdiamond;startFill1;endArrownone;注意区分空心三角箭头endFill0表示继承/实现空心菱形startFill0表示聚合实心菱形startFill1表示组合虚线表示实现或依赖。这与 style-reference.md 中箭头类型表的diamond空心与block实心三角定义一一对应。仓库的 uml-class.drawio 模板即用上述规则组装了接口 2 个类 枚举的完整示例。组件图Component Diagram形状Style String组件shapecomponent;alignleft;spacingLeft36;whiteSpacewrap;html1;接口棒棒糖ellipse;whiteSpacewrap;html1;aspectfixed;小圆端口shapemxgraph.uml.port;节点shapemxgraph.uml.node;whiteSpacewrap;html1;工件shapemxgraph.uml.artifact;whiteSpacewrap;html1;时序图Sequence Diagrams形状Style StringActor 参与者shapemxgraph.uml.actor;whiteSpacewrap;html1;生命线对象shapeumlLifeline;startSize40;whiteSpacewrap;html1;激活框shapeumlActivation;whiteSpacewrap;html1;同步消息edgeStyleelbowEdgeStyle;elbowvertical;html1;endArrowblock;endFill1;异步消息edgeStyleelbowEdgeStyle;elbowvertical;html1;endArrowopen;endFill0;返回消息edgeStyleelbowEdgeStyle;elbowvertical;dashed1;html1;endArrowopen;endFill0;自调用edgeStyleelbowEdgeStyle;elbowvertical;exitX1;exitY0.3;entryX1;entryY0.5;html1;时序图有一个极易踩坑的点生命线是浮动边floating edge不使用source/target属性而是在mxGeometry内通过mxPoint assourcePoint与mxPoint astargetPoint定位详见 SKILL.md 第 4 节与时序图模板 sequence.drawio。exitX/exitY与entryX/entryY取值 0.0–1.0控制自调用消息从源对象右侧 30% 高度处绕出、回到右侧 50% 高度处。状态图State Diagrams形状Style String初始状态实心圆ellipse;html1;aspectfixed;fillColor#000000;strokeColor#000000;状态rounded1;whiteSpacewrap;html1;arcSize50;结束状态shapedoubleEllipse;fillColor#000000;strokeColor#000000;迁移edgeStyleorthogonalEdgeStyle;html1;endArrowblock;endFill1;分支/汇合shapemxgraph.uml.fork_or_join;html1;fillColor#000000;状态图的初始/结束状态通过fillColor#000000实现实心着色arcSize50让状态框趋近胶囊形。Entity RelationshipER 实体关系图crows foot 记号启用方式View Shapes Entity Relation现代 ER 表table 容器 行 单元格ER 表使用三层结构shapetable容器 →shapetableRow行 →shapepartialRectangle单元格。行的portConstrainteastwest声明左右两侧为连接端口!-- Table container -- mxCell idtbl-orders valueorders styleshapetable;startSize30;container1;collapsible1;childLayouttableLayout;fillColor#dae8fc;strokeColor#6c8ebf;fontStyle1; vertex1 parent1 mxGeometry x80 y80 width240 height210 asgeometry / /mxCell !-- Column row -- mxCell idcol-id value styleshapetableRow;horizontal0;startSize0;swimmilaneHead0;swimlaneBody0;fillColornone;collapsible0;dropTarget0;points[[0,0.5],[1,0.5]];portConstrainteastwest; vertex1 parenttbl-orders mxGeometry y30 width240 height30 asgeometry / /mxCell !-- PK marker cell -- mxCell valuePK styleshapepartialRectangle;connectable0;fillColornone;top0;left0;bottom0;right0;fontStyle1;overflowhidden; vertex1 parentcol-id mxGeometry width40 height30 asgeometry / /mxCell !-- Column name cell -- mxCell valueid styleshapepartialRectangle;connectable0;fillColornone;top0;left0;bottom0;right0;overflowhidden; vertex1 parentcol-id mxGeometry x40 width140 height30 asgeometry / /mxCell !-- Data type cell -- mxCell valueUUID styleshapepartialRectangle;connectable0;fillColornone;top0;left0;bottom0;right0;overflowhidden;fontStyle2; vertex1 parentcol-id mxGeometry x180 width60 height30 asgeometry / /mxCell仓库的 er-diagram.drawio 是这套结构的完整实战三张表users、orders、order_items各自使用shapetable容器与childLayouttableLayout布局每行拆为标记PK/FK 列名 类型/约束三个partialRectangle单元格例如CHECK (gt; 0)必须转义为gt;、DEFAULT NOW()等数据库约束直接写在第三个单元格中行间用fixedRows1;rowLines0;控制行高固定、隐藏行分隔线。表间关系使用edgeStyleentityRelationEdgeStyle连接行级端口如sourcetbl_users_r1并通过exitX/exitY、entryX/entryY指定连线出入口。ER 关系连接器crows foot 基数基数Style String一对一edgeStyleentityRelationEdgeStyle;html1;startArrowERmandOne;endArrowERmandOne;startFill1;endFill1;一对多edgeStyleentityRelationEdgeStyle;html1;startArrowERmandOne;endArrowERmany;startFill1;endFill1;零对多edgeStyleentityRelationEdgeStyle;html1;startArrowERmandOne;endArrowERzeroToMany;startFill1;endFill0;零对一edgeStyleentityRelationEdgeStyle;html1;startArrowERmandOne;endArrowERzeroToOne;startFill1;endFill0;多对多edgeStyleentityRelationEdgeStyle;html1;startArrowERmany;endArrowERmany;startFill1;endFill1;箭头含义可对照 style-reference.md 的 Arrow Types 表ERmandOne 双竖线强制性一ERmany 乌鸦脚多ERzeroToOne 圆圈加竖线零或一ERzeroToMany 圆圈加乌鸦脚零或多。Network / Infrastructure 网络库启用方式View Shapes Networking形状Style String通用服务器shapeserver;html1;whiteSpacewrap;Web 服务器shapemxgraph.network.web_server;数据库服务器shapemxgraph.network.database;笔记本电脑shapemxgraph.network.laptop;台式机shapemxgraph.network.desktop;手机shapemxgraph.network.mobile;路由器shapemxgraph.cisco.routers.router;交换机shapemxgraph.cisco.switches.workgroup_switch;防火墙shapemxgraph.cisco.firewalls.firewall;通用云shapecloud;互联网shapemxgraph.network.internet;负载均衡器shapemxgraph.network.load_balancer;注意路由器、交换机、防火墙复用Cisco 库mxgraph.cisco.*的图元但均在 Networking 库中聚合呈现。BPMN 2.0 业务流程库启用方式View Shapes BPMN形状前缀shapemxgraph.bpmn.*BPMN 形状统一使用shapemxgraph.bpmn.shape作为容器通过symbol*切换具体语义并用perimeter指定连接点周长类型形状Style String开始事件shapemxgraph.bpmn.shape;perimetermxPerimeter.ellipsePerimeter;symbolgeneral;verticalLabelPositionbottom;结束事件shapemxgraph.bpmn.shape;perimetermxPerimeter.ellipsePerimeter;symbolterminate;verticalLabelPositionbottom;任务shapemxgraph.bpmn.shape;perimetermxPerimeter.rectanglePerimeter;symboltask;排他网关shapemxgraph.bpmn.shape;perimetermxPerimeter.rhombusPerimeter;symbolexclusiveGw;并行网关shapemxgraph.bpmn.shape;perimetermxPerimeter.rhombusPerimeter;symbolparallelGw;子流程shapemxgraph.bpmn.shape;perimetermxPerimeter.rectanglePerimeter;symbolsubProcess;顺序流edgeStyleorthogonalEdgeStyle;html1;endArrowblock;endFill1;消息流edgeStyleorthogonalEdgeStyle;dashed1;html1;endArrowblock;endFill0;泳池shapepool;startSize30;horizontal1;泳道swimlane;startSize30;Mockup / Wireframe 原型图库启用方式View Shapes Mockup形状Style String按钮shapemxgraph.mockup.forms.button;输入框shapemxgraph.mockup.forms.text1;复选框shapemxgraph.mockup.forms.checkbox;下拉框shapemxgraph.mockup.forms.comboBox;浏览器窗口shapemxgraph.mockup.containers.browser;手机屏幕shapemxgraph.mockup.containers.smartphone;列表shapemxgraph.mockup.containers.list;表格shapemxgraph.mockup.containers.table;Kubernetes 容器编排库启用方式View Shapes Kubernetes资源Style StringPodshapemxgraph.kubernetes.pod;Deploymentshapemxgraph.kubernetes.deploy;Serviceshapemxgraph.kubernetes.svc;Ingressshapemxgraph.kubernetes.ing;ConfigMapshapemxgraph.kubernetes.cm;Secretshapemxgraph.kubernetes.secret;PersistentVolumeshapemxgraph.kubernetes.pv;Namespaceshapemxgraph.kubernetes.ns;Nodeshapemxgraph.kubernetes.node;Kubernetes 库是绘制集群架构图的高效途径Pod/Deployment 等工作负载与 ConfigMap/Secret 等配置资源都能以原生 K8s 图标表达配合 Networking 库的路由器、防火墙与shapeswimlane容器即可组织出集群边界 → 命名空间 → 工作负载 → 存储的分层拓扑。在 VS Code 中启用形状库本仓库的 skill 目标产出物是.drawio文件而 VS Code 中通过draw.io VS Code 扩展hediet.vscode-drawio安装命令ext install hediet.vscode-drawio内嵌了完整编辑器因此库的启用发生在编辑器内部即 VS Code 内嵌的 draw.io 界面而非 VS Code 自身设置在 VS Code 中打开任意.drawio或.drawio.svg文件点击左侧形状面板中的图标 →Search Shapes或More Shapes勾选需要激活的库激活后形状即出现在面板中可拖拽使用。重要形状库按用户维度存储在 draw.io 设置中不是按项目存储因此一次启用后对所有.drawio文件均生效。这也意味着生成的文件本身不依赖某台机器的库配置——只要形状对应的mxgraph.*图元在目标 draw.io 版本中存在文件在任何机器上都能正确渲染。自定义形状库.xml文件与mxlibrary格式当内置库不满足需求时可以创建自定义形状库——本质是一个 XML 文件通过File Open Library加载mxlibrary [ { xml: lt;mxCell value\Component\ style\rounded1;whiteSpacewrap;html1;fillColor#dae8fc;\ vertex\1\gt;lt;mxGeometry width\120\ height\60\ as\geometry\ /gt;lt;/mxCellgt;, w: 120, h: 60, aspect: fixed, title: My Component } ] /mxlibrary每个形状条目包含 4 个字段xmlXML 转义后的mxCell单元格定义注意lt;/gt;/quot;转义w/h默认宽高像素aspect设为fixed时锁定宽高比title面板中显示的名称。从实现原理看xml字段中的 mxCell 与我们手写.drawio文件时的顶点单元格完全同构都是stylevertex1mxGeometry只是被转义后内嵌进 JSON 数组。因此你完全可以把仓库模板如 er-diagram.drawio中验证过的任意style字符串如shapetable、shapemxgraph.bpmn.shape;symboltask封装进自定义库实现团队级图元复用。与仓库工具链的配合写入、校验、插入形状库文档解决了用什么样式画什么形状而仓库 scripts 目录解决了画完怎么保证文件合法validate-drawio.py校验.drawio的 XML 结构检查根单元格id0/id1是否存在且唯一、所有mxCellid 是否重复、每条边的source/target是否指向存在的顶点、每个顶点是否携带mxGeometry、parent链是否有效。用法python scripts/validate-drawio.py file.drawio退出码 0 为通过1 为存在错误。从源码看它通过xml.etree.ElementTree解析并逐 diagram 收集cell_ids这正是对 drawio-xml-schema.md 中验证规则清单的程序化实现add-shape.py为已有.drawio安全追加单个顶点。参数包括diagram、label、x、y以及--width默认 120、--height默认 60、--style默认rounded1;whiteSpacewrap;html1;、--diagram-index默认 0、--dry-run只打印不写入。其源码实现会自动生成不与现有 id 冲突的auto_sha1[:8]形式 id默认把新单元格挂到parent1默认图层下遇到 base64 压缩的 diagram 会明确报错提示Compressed diagrams are not supported。例如用形状库中的决策菱形样式向流程图追加一个节点python skills/draw-io-diagram-generator/scripts/add-shape.py docs/flowchart.drawio Decision 400 400 \ --width 160 --height 80 \ --style rhombus;whiteSpacewrap;html1;fillColor#fff2cc;strokeColor#d6b656;两个脚本的具体参数与完整示例见 scripts/README.md。完整的工作流在 SKILL.md 中定义从理解需求、选择模板、规划布局、生成 mxGraph XML、应用样式、保存校验到交付共 10 步形状库与 style-reference.md 分别在其中第 5 步被引用为样式与库名的权威出处。实战速查与常见问题语义色板推荐全项目统一用途fillColorstrokeColor主 / 信息客户端、组件#dae8fc#6c8ebf成功 / 开始#d5e8d4#82b366警告 / 决策#fff2cc#d6b656错误 / 结束#f8cecc#b85450中性#f5f5f5#666666外部 / 伙伴#e1d5e7#9673a6形状渲染常见问题与 shape-libraries 相关的排查项现象可能原因修复形状样式不渲染shape名称拼写有误对照本文各库表格核对精确的shapemxgraph.*字符串标签显示为转义 HTML单元格样式缺html1在 style 中追加html1;形状位置错乱子元素坐标相对容器计算检查parent将 x/y 改为相对容器坐标文件打开为空白缺少id0/id1根单元格在任意其他单元格之前补齐两个根单元格文件显示为压缩乱码mxGraphModel 为 base64 编码在 draw.io 中打开后File Export XML导出非压缩版本使用本仓库资源的最小路径按需从本文各形状库表复制 style 字符串参照 flowchart.drawio、er-diagram.drawio、uml-class.drawio、sequence.drawio、architecture.drawio 等模板的结构编写或改造自己的文件用 validate-drawio.py 校验用 add-shape.py 增量添加节点在 VS Code已安装hediet.vscode-drawio扩展中打开即可自动渲染。综上shape-libraries.md本质上是一张形状名 → style 字符串的权威映射表而它与仓库的模板、脚本、样式与 XML Schema 文档共同构成了一条从想画什么到文件合法可打开的完整生产链路。掌握形状库的精确字符串是手工编写高质量.drawio文件的第一道也是最常出错的一道门槛。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考