Project Icon

drawio-libs

自定义图形库创建与分享指南

该项目提供创建和分享自定义图形库的指南,包括使用scratchpad创建新库、添加元素、导出和分享库文件等步骤。项目还包含多个预制矢量和位图图标库,涵盖技术图表、图标集等领域,为diagrams.net用户提供丰富图形资源,提升流程图设计效率。

diagrams.net 库

创建和分享自定义库:

  1. 使用草稿区或点击"文件"、"新建库"来创建新库
  2. 库出现在侧边栏后,您可以从图表或硬盘拖放单元格和图片
  3. 支持的图片格式有PNG、JPG、SVG和GIF(包括动态GIF)。如果添加SVG文件,可以使用此方法使SVG的颜色可配置:https://www.drawio.com/doc/faq/svg-edit-colours
  4. 添加完所有元素后,点击笔形图标,为条目添加标题并点击导出
  5. 这将把库文件下载到您的计算机
  6. 要分享它,必须将文件上传到网络并通过公开URL提供。一种方法是将其上传到公共GitHub仓库。
  7. 如果使用GitHub,请使用库的_原始_URL,格式为https://raw.githubusercontent.com/组织/仓库/引用/路径/文件名.xml,例如https://raw.githubusercontent.com/jgraph/drawio-libs/master/libs/templates.xml
  8. 获得库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
  9. 然后将其添加到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
  10. 然后您可以分享这个链接,点击它将在draw.io中打开并安装您的自定义库

库文件格式

库由一个包含JSON数组的<mxlibrary>节点组成,该数组包含具有压缩或未压缩mxGraphModel的xml属性或具有图像数据URI(PNG、JPG或SVG格式)的data属性的条目。所有条目必须有wh属性,表示条目中单元格或图像的宽度和高度,以及可选的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属性,<必须写成&lt;>必须写成&gt;"必须写成\"(转义),例如"xml": "&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id=\"0\"/&gt;&lt;mxCell id=\"1\" parent=\"0\"/&gt;&lt;mxCell id=\"2\" value=\"Test3\" style=\"whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;\" vertex=\"1\" parent=\"1\"&gt;&lt;mxGeometry width=\"120\" height=\"60\" as=\"geometry\"/&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;"

压缩的XML可以通过点击https://jgraph.github.io/drawio-tools/tools/convert.html 的"编码"按钮获得,例如"xml": "jVBLDoMgED3N7BE2XVdbV131BKROhASE4LTq7TsVWuPCpAuS95lH3gyo2s9t0tHcQocO1AVUnUKgjPxco3Mghe1ANSCl4AfyeuBWqyuiTjjQPwGZAy/tnpiVLIy0uCJwwMaRyXkylvAe9ePjTNyZNUOeSzcVw5D00GP5EBPhfFhqlUqjFoNHSguPTLYjkydOubcwaHtDe02Pmfe/5LYhg7Lkl27HXL3drd8="

图像(栅格)库

矢量库

集成图标:一组微软集成图标。

Kubernetes 图标:一组 Kubernetes 图标。已过时,因为应用程序中目前已集成了一套图标。 点击上方的链接打开库,或在 draw.io 中选择"文件",然后选择"从 URL 打开库",并输入类似 https://jgraph.github.io/drawio-libs/libs/templates.xml 格式的 URL

项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台,能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐,Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持,能够阅读和理解用户上传的文件内容,解析网页信息,并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题,Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型,免费访问各种图像生成与AI训练工具,从Stable Diffusion等基础模型开始,轻松实现创新图像生成。体验前沿的AI技术,推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器,它将改变您观看视频的方式!SubCat结合了先进的人工智能技术,为您提供即时视频字幕翻译,无论是本地视频还是网络流媒体,让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台,利用前沿AI技术,为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图,再到文案生成,美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号