diagrams.net 库
创建和分享自定义库:
- 使用草稿区或点击"文件"、"新建库"来创建新库
- 库出现在侧边栏后,您可以从图表或硬盘拖放单元格和图片
- 支持的图片格式有PNG、JPG、SVG和GIF(包括动态GIF)。如果添加SVG文件,可以使用此方法使SVG的颜色可配置:https://www.drawio.com/doc/faq/svg-edit-colours
- 添加完所有元素后,点击笔形图标,为条目添加标题并点击导出
- 这将把库文件下载到您的计算机
- 要分享它,必须将文件上传到网络并通过公开URL提供。一种方法是将其上传到公共GitHub仓库。
- 如果使用GitHub,请使用库的_原始_URL,格式为https://raw.githubusercontent.com/组织/仓库/引用/路径/文件名.xml,例如https://raw.githubusercontent.com/jgraph/drawio-libs/master/libs/templates.xml
- 获得库URL后,可以通过编码URL并将其添加到clibs参数来分享。要编码URL,将其粘贴到https://jgraph.github.io/drawio-tools/tools/convert.html 的文本框中并点击"URL编码"。对于我们的例子,会得到https%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Ftemplates.xml
- 然后将其添加到https://app.diagrams.net/?splash=0&clibs=U,例如https://app.diagrams.net/?splash=0&clibs=Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Ftemplates.xml(其中splash=0跳过启动屏幕)。可以通过分号分隔指定多个库。每个值如果是URL,必须以U为前缀,例如https://app.diagrams.net/?splash=0&clibs=Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Fun-ocha-icons-bluebox.xml;Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Fun-ocha-icons.xml
- 然后您可以分享这个链接,点击它将在draw.io中打开并安装您的自定义库
库文件格式
库由一个包含JSON数组的<mxlibrary>
节点组成,该数组包含具有压缩或未压缩mxGraphModel的xml
属性或具有图像数据URI(PNG、JPG或SVG格式)的data
属性的条目。所有条目必须有w
和h
属性,表示条目中单元格或图像的宽度和高度,以及可选的title
属性,用于侧边栏和预览中的标题。对于具有data
属性的条目,可以指定可选的"aspect": "fixed"
以将aspect=fixed
添加到图像单元格的样式中,还可以指定可选的style
属性以添加到图像单元格的默认样式中。例如,对于"data": "data:image/png,[...]", "aspect": "fixed", "style": "resizable=0;rotatable=0;"
,结果单元格样式将是shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;aspect=fixed;image=data:image/png,[...];resizable=0;rotatable=0;
对于未压缩的xml
属性,<
必须写成<
,>
必须写成>
,"
必须写成\"
(转义),例如"xml": "<mxGraphModel><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/><mxCell id=\"2\" value=\"Test3\" style=\"whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;\" vertex=\"1\" parent=\"1\"><mxGeometry width=\"120\" height=\"60\" as=\"geometry\"/></mxCell></root></mxGraphModel>"
压缩的XML可以通过点击https://jgraph.github.io/drawio-tools/tools/convert.html 的"编码"按钮获得,例如"xml": "jVBLDoMgED3N7BE2XVdbV131BKROhASE4LTq7TsVWuPCpAuS95lH3gyo2s9t0tHcQocO1AVUnUKgjPxco3Mghe1ANSCl4AfyeuBWqyuiTjjQPwGZAy/tnpiVLIy0uCJwwMaRyXkylvAe9ePjTNyZNUOeSzcVw5D00GP5EBPhfFhqlUqjFoNHSguPTLYjkydOubcwaHtDe02Pmfe/5LYhg7Lkl27HXL3drd8="
图像(栅格)库
- 模板:一个包含技术图表基本构建块的示例库。漫画模板需要Humor Sans字体。
- UN-OCHA图标:联合国人道主义事务协调办公室(OCHA)2012年人道主义图标。
- 家谱图:一个包含家谱图(也称为家庭图)图标的库。
- DigitalOcean:一个包含DigitalOcean资源图标的库(从https://do.co/diagram-kit 和https://www.digitalocean.com/press 抓取)。
- 警告:DO没有为这些图标提供许可。使用风险自负!
矢量库
- Apache基金会图标: 由Cir02制作的Apache基金会图标集。
- 结账和配送图标: 由EpicPxls制作的图标集,包含35个图标,描绘了电子商务网站常见结账流程中的各种操作和实体。
- OSA图标: 用于创建安全架构或其他技术图表的开源免费技术图标 开放安全架构。
- 扁平彩色图标: 一组色彩丰富的扁平图标集。
- 旅行图标: 由PrintExpress制作的40个免费图标,用于为旅行社或航空公司网站增添趣味。
- 手势和指纹图标: 由TheSquid制作的100个实用的手势和指纹线条图标。
- Material Design图标: Material Design图标是谷歌根据Material Design指南设计的官方图标集。
- 图表图标: 一组浅色图表图标集。
- Windows 10图标: 一组Windows 10图标集。
- Gnome图标: 基于Gnome Gorilla主题的网络图标方案。
- Font Awesome: 标志性字体和CSS工具包Font Awesome。
- Arista图标: 一组Arista网络图标集。
- Commvault图标: 一组Commvault网络图标集。
- Fortinet图标: 一组Fortinet网络图标集。 Fortinet 图标:一组 Fortinet 网络图标。
集成图标:一组微软集成图标。
Kubernetes 图标:一组 Kubernetes 图标。已过时,因为应用程序中目前已集成了一套图标。 点击上方的链接打开库,或在 draw.io 中选择"文件",然后选择"从 URL 打开库",并输入类似 https://jgraph.github.io/drawio-libs/libs/templates.xml 格式的 URL