使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（1）

最新推荐文章于 2025-07-02 11:19:38 发布
最新推荐文章于 2025-07-02 11:19:38 发布
阅读量8.8k 收藏 10
点赞数 1
CC 4.0 BY-SA版权
分类专栏： draw.io 文章标签： draw.io uml图 画图工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41108690/article/details/88608748
本文介绍了如何使用draw.io的嵌入模式在本科毕设项目中实现UML图绘制功能。详细讲解了draw.io的嵌入模式、URL参数配置，包括spin、modified、libraries等，并提供了配置项的说明。此外，还列举了其他可用的URL参数，如ui、create、title等，以及draw.io与其他UML绘图工具的对比。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（2）
使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（3）

正在编写的本科毕设项目中要求实现绘制UML图的需求，我搜索了一些相关的开源软件，发现了jsUML2、jTopo、PlantUML、Java UML Generator、JS-Sequence-Diagrams、draw.io等可参考的开源软件 （*具体介绍详见页面下方），经过考虑决定使用draw.io的嵌入模式。
因为找资料找到头秃，决定把自己做的一些工作记录下来分享给大家。才疏学浅，如有错漏欢迎批评指正！

开始

draw.io是一个基于mxGraph、使用Java和JS等技术的开源绘图软件，其功能和界面类似processon，在线网址为：www.draw.io 。
获取draw的源码请访问：draw.io的github地址，你可以用它搭建一个自己的drawio服务器。
同时，有一个官方桌面版。

嵌入模式

draw.io的嵌入模式将其作为一个应用程序嵌入到另一个应用程序之中，其功能与网页版基本相同。

嵌入模式的url参数

可使用iframe和js跨域通讯将嵌入到我们的页面，并可以通过css对iframe的style进行调整。

首先，在需要嵌入draw.io的<

最低0.47元/天 解锁文章

200万优质内容无限畅学
架构师必须掌握的画图工具draw.io、文本绘图（PlantUML）（架构图、UML图、流程图、时序图）
码上悦读
03-19 2508
今天，我将为大家解锁两种强大易用的画图工具，助你在架构设计之路上乘风破浪、披荆斩棘。 首先是draw.io，这款在线绘图工具以其丰富的预设模板和强大的定制能力深受广大技术人群喜爱，无论是绘制复杂的系统架构图还是精巧的UML类图，都能游刃有余。既支持在线画图，也支持离线画图！ 其次，我们还将探讨语雀中的文本绘图工具，特别是支持PlantUML语法的特性，让你可以通过简单的代码就能描绘出专业美观的架构和设计图，充分体现了“码即是图，图亦是码”的理念。
draw-io-note：用draw.io画的UML图等
02-13
画笔记 用draw.io画的UML图等
redmine_drawio:宏插件可将draw.io图嵌入Redmine Wiki页面
05-04
Redmine draw.io插件 是免费的在线图表绘制工具。 此插件将允许将draw.io图表嵌入 Wiki页面，发行说明和发行说明。 一张纸条 在提交问题之前，请仔细阅读README.md文件（此页面）：许多看似有缺陷的替代品是宏的预期行为，因此在开始使用此插件以及发现异常行为之前请仔细阅读。 要求 需要Redmine v2.6 +。 已使用Redmine v3.1.4，v3.2.4，v3.3.3，v3.4.0，v4.0.4以及Easy Redmine 2016.05.07测试。 安装 安装redmine_drawio插件： cd $REDMINE_HOME/plugins git clone https://github.com/mikitex70/redmine_drawio.git 重新启动Redmine以加载新插件 对于宏drawio_attach确保启用Redmine的R
推荐使用：Redmine draw.io 插件 —— 动态图表的完美嵌入
gitblog_00006的博客
06-24 682
推荐使用：Redmine draw.io 插件 —— 动态图表的完美嵌入 redmine_drawio Macro plugin to embed draw.io diagrams into Redmine wiki pages 项目地址: https://git...
draw.io（现更名为 diagrams.net）的详细介绍及详细使用教程
最新发布
weixin_43891869的博客
07-02 1258
draw.io（现名diagrams.net）是一款免费开源的跨平台图表工具，支持流程图、UML图等数十种类型。其核心优势包括云端存储集成、实时协作、轻量高效和多格式导出。使用教程涵盖环境准备、绘图操作（添加/编辑图形、连接元素）、保存导出等步骤，并提供了对齐组合、自由绘图等进阶技巧。相比Visio等工具，draw.io具有全平台兼容、完全免费等优势，适合个人和团队使用。初学者可快速上手拖拽操作，高级用户可利用图层管理、LaTeX公式等功能处理复杂需求。
Draw.io绘制UML图教程
踏雨歌青春，诗酒趁年华
02-22 1万+
本文是使用在线流程图设计网站draw.io绘制UML图的教程。draw.io 是一款强大的免费在线图表绘制工具，支持创建流程图、组织结构图、时序图等多种图表类型。它提供丰富的形状库、强大的文本编辑和样式设置功能，使用户能够轻松创建专业级图表。draw.io 具有用户友好的界面，支持实时协作，可以存储到云端服务，并提供多种导出选项。
drawio-integration:draw.io集成
05-28
diagrams.net集成 集成或“嵌入式模式”用于主机应用程序负责存储图的情况，而diagrams.net用于图的编辑。 在这种情况下，diagrams.net会在具有特殊URL参数的iframe或窗口内使用，并使用HTML5 Messaging API进行远程控制。 仅将embed.diagrams.net用于嵌入模式。 基本流程如下： 在iframe中使用特殊的URL参数加载embed.diagrams.net 将图表数据发送到iframe以进行编辑 从iframe接收并保存图表数据 删除iframe 根据要求，可以将PNG或SVG图像或该图的XML用作存储格式。 选择存储格式时，请考虑以下因素： 图像（PNG和SVG）应用于没有初始延迟的快速加载。 将图数据嵌入到PNG和SVG图像中可用于避免单独保存图像和图，但是会导致图像文件变大。 使用查看器或编辑器时，应使用图像显
此扩展将Draw.io集成到VS Code中-javascript
06-21
此扩展将Draw.io集成到VS Code中 Draw.io VS Code 集成这个非官方扩展将 Draw.io 集成到 VS Code 中。 功能 在 Draw.io 编辑器中编辑 .drawio、.dio、.drawio.svg 或 .drawio.png 文件。 要创建新图表，只需创建一个空的 *.drawio、*.drawio.svg 或 *.drawio.png 文件并打开它！ .drawio.svg 是有效的 .svg 文件，可以嵌入到 Github 自述文件中！ 无需导出。 .drawio.png 是有效的 .png 文件！ 无需导出。 你应该尽可能使用 .svg - 它们看起来好多了！ 要在不同格式之间转换，请使用 Draw.io: Convert To... 命令。 默认使用 Draw.io 的离线版本。 您可以选择一个主题。 Demo 编辑 .drawio.svg/.drawio.png 文件 您可以直接编辑和保存 .drawio.svg 和 .drawio.png 文件。 这些文件是包含嵌入式 Draw.io 图表的完全有效的 svg/p
【drawio笔记】比较嵌入和导出格式
06-19 1259
比较嵌入和导出格式 Compare embed and export formats 虽然 HTML、SVG 和images的嵌入代码相似，但你会发现其中一种比另一种更适合你的情况。 HTML SVG Image 需要 JavaScript(Requires JavaScript) Yes No No 使用系统字体(Uses system fonts) Yes Yes No 支持超链接(Supports hyperlinks) Yes Yes No 使用外来物(Uses for
使用nw.js制作桌面版draw.io
星沉地动
03-30 1159
draw.io是一个开源的在线流程图制作软件，源码地址：https://github.com/jgraph/drawio 这个软件的特殊之处在于，它完全使用web技术开发，可以很方便地搭建在线编辑软件。 对于Windows个人用户而言，还是使用桌面程序比较好一些。 官方也提供桌面版本程序:https://github.com/jgraph/drawio-desktop 官方桌面程序是使用e...
常用画图和笔记工具（plantuml+drawio+Typora）
Fire的博客
03-26 2499
Typora用来做笔记很好有用，最新的Typora工具已经开始收费，免费的稍后上传。客户端的uml免费工具稍后上传。二、drawio免费的画图工具。一、plantuml。
drawio-webapp
02-13
用于drawio嵌入模式 微调了一些样式，扩展了几个消息 私有化drawio的部署与微调 我们可以直接git clone https://github.com/jgraph/drawio并部署src/main/webapp目录即可 如果部分内容需要微调，可加入脚本，或者修改现有的脚本来实现调整，某些我们可以在url上新加入配置&retina=1 ，表导出2倍图，而在EditorUi.prototype.exportToCanvas中，我们需要将EditorUi.prototype.exportToCanvas的相应参数（第八个）动态调整成2倍 我们在修改/补充常量js时，需留意，drawio本身发布了service-worker，可以对应做偏移，其中service-worker通过app.js引用，不过其静态资源的url会有路径问题 扩展新协议 我们可以修改drawio，允许可以接受新的协
PlantUML、draw.io、XMind等实用画图工具
qq_37892675的博客
09-14 4214
java技术方案评审画图工具部分汇总前言一、ProcessOn二、PlantUML插件三、XMind思维导图四、draw.io五、ER图-Navicat自带功能总结 前言 一个完整的需求到上线，作为研发，中间少不了技术方案设计评审，那么对于技术方案评审中最直观的一种呈现方式即是各种流程图、时序图、UML图、ER图等，本期介绍技术方案评审中比较实用的几种画图工具。 一、ProcessOn 链接：ProcessOn在线画图软件 此画图工具支持各种UML用例图、时序图、流程图等，个人尝试之后，感觉比较好用，但是免
draw.io和plantuml替代visio画图工具(五)
Android系统攻城狮
01-04 6313
本篇目的：draw.io和plantuml替代visio画图工具目录1.drawio.网址访问.draw.io快捷键2.plantuml开源工具.网址。
PlantUML-UML 绘图工具安装、Graphviz安装、本地使用/在线使用、语法、图示案例
热门推荐
A的博客
07-18 1万+
本篇提供两种使用方式分别为vscode使用：需要安装插件以及下载Graphviz并配置环境变量各取所需即可，想要在线使用的朋友可以直接跳过看在线使用演示及语法部分活动图（新语法）活动标签以冒号开始，以分号结束，支持 CreoleWiki 语法。活动默认按照定义的顺序进行连接。例如：开始和结束可以使用关键字start和stop（或end）表示，例如：startstop。条件语句：使用ifthen和else（或elseif）设置分支测试，标注文字放在括号中。例如：startelse(no)
java 容器 接口 关系图 draw.io
weixin_45859534的博客
08-06 552
https://viewer.diagrams.net/?highlight=0000ff&layers=1&nav=1&title=java%E5%AE%B9%E5%99%A8.drawio#R5VvZduI4EP0aHunjfXnsJEwy56Rn0oc%2BvTwqtgBNjEXLooH5%2Bpax5EU4oIC30E%2BgkizLurdulQozMm%2BX23sCVotPOITRyNDC7ci8GxmGYdo2%2B0gtu8yia76ZWeYEhdxWGKbofygG
draw.io 网页版二次开发（2）：开始修改代码
【爱打盹的喵】的专栏
05-10 5533
代码的修改就到这里了。以后要是有其他的记录，我会继续补充。下一章开始写draw.io的打包和部署。
draw.io：流程图绘制工具
weixin_30954607的博客
01-06 1070
欢迎转载，但请指明出处：https://www.cnblogs.com/zhizaixingzou/p/10230224.html draw.io是一个流程图绘制工具，可以在线编辑，也可以下载软件包到本地进行本地编辑。 1）下载和安装软件 进入draw.io官网：https://about.draw.io/。 安装是傻瓜式的。 2）也可以直接在线编辑：https:/...
PlantUML画时序图，真香！
三分恶的博客
05-17 1945
PlantUML是一个多功能组件，可快速、直接地创建图表。用户可以使用简单直观的语言起草各种图表。PlantUML是一个开源工具，它允许我们用简单的文本描述来创建UML图，包括序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图，以及我们今天要讲的时序图。除了UML图之外，PlantUML 还支持一系列其他图表，例如JSON数据、YAML数据、EBNF图表、架构图等等。
draw.io的装饰模式UML类图
04-28
### 如何在 draw.io 中绘制装饰模式的 UML 类图 要在 draw.io 中绘制装饰模式（Decorator Pattern）的 UML 类图，可以通过以下方法完成： #### 1. 创建一个新的类图 打开 draw.io 并创建一个新文档。选择左侧工具栏中的 **“更多形状”** -> **“UML”** 来加载 UML 形状库[^3]。 #### 2. 添加必要的 UML 元素 装饰模式的核心概念包括四个主要部分：抽象组件接口、具体组件、装饰器基类以及具体的装饰器实现。以下是这些元素的具体表示方式： - 使用矩形框代表类。 - 使用虚线箭头表示继承关系或实现接口的关系。 - 使用实线箭头表示关联关系。 #### 3. 绘制装饰模式的主要组成部分 以下是装饰模式的关键角色及其对应的 UML 表示法： - **Component**: 抽象组件接口，定义对象的行为。 - **ConcreteComponent**: 实现 Component 接口的具体类。 - **Decorator**: 装饰器基类，持有一个指向 Component 的引用并提供与 Component 一致的接口。 - **ConcreteDecoratorA/B/C...**: 具体的装饰器类，扩展 Decorator 基类的功能。 下面是一个简单的代码片段展示如何用 PlantUML 描述装饰模式的类图[^1]: ```plantuml @startuml interface Component { + operation() } class ConcreteComponent { + operation() } abstract class Decorator implements Component { - component: Component + setComponent(Component c) + operation() } class ConcreteDecoratorA extends Decorator { + addedBehavior() + operation() } class ConcreteDecoratorB extends Decorator { + anotherAddedBehavior() + operation() } Component <|-- ConcreteComponent Component <|-- Decorator Decorator <|.. ConcreteDecoratorA Decorator <|.. ConcreteDecoratorB @enduml ``` 将上述 PlantUML 代码嵌入到 draw.io 中即可生成相应的 UML 图表[^1]。 #### 4. 配置 draw.io 支持 PlantUML 如果希望直接在 draw.io 中使用 PlantUML 语法，则需要启用其内置的支持功能或者通过外部服务渲染 PlantUML 图片再导入至 draw.io[^1]。 --- ### 示例效果图 最终效果应类似于如下结构： - `Component` 是顶层接口； - `ConcreteComponent` 和 `Decorator` 同时实现了该接口； - `ConcreteDecoratorX` 扩展自 `Decorator`，并通过组合的方式持有对原始组件的引用。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值