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

最新推荐文章于 2025-04-20 10:40:42 发布
最新推荐文章于 2025-04-20 10:40:42 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： draw.io 文章标签： json协议 draw.io 画图工具 uml图 message
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41108690/article/details/88719415
版权
本文介绍了如何利用draw.io的嵌入模式通过JSON协议实现UML图的绘制功能。在iframe中，编辑器通过'init'、'save'、'saveAndExit'等事件与主窗口交互，传递XML数据进行初始化和保存操作。同时，文章详细阐述了各种交互消息的格式和用途，包括自动保存、对话框、提示框和状态更新等功能。

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

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

JSON协议

在嵌入模式（或客户端模式）下，draw.io一般使用json来传递message（即在url参数中设置proto = json）。
P.S.主窗口向编辑器传输信息一般为’action’，编辑器向主窗口传输信息一般为’event’。

使用的json协议如下：

  • iframe中的编辑器准备好时，向主窗口发送{event: 'init'}，并等待主窗口向iframe发送{action: 'load', xml: '...'}的加载消息用于初始化编辑器，此消息中的xml会在编辑器中显示出来，XML可以是任何受支持的图像XML格式的表示，如嵌入XML的png、svg等。（若传递XML+PNG，也可以使用xmlpng参数）。具体的格式要求见：
最低0.47元/天 解锁文章
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 Notion Embed：无缝整合绘图于Notion
gitblog_01260的博客
10-18 741
Draw.io Notion Embed：无缝整合绘图于Notion drawio-notion-embed A super simple project that lets you embed draw.io diagrams directly into Notion. ...
Draw.io Mermaid 插件安装与配置指南
gitblog_00151的博客
04-20 1245
Draw.io Mermaid 插件安装与配置指南 drawio_mermaid_plugin Mermaid plugin for drawio desktop 项目地址: https://gitcode.com/gh_mirr...
使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（3）
weixin_41108690的博客
05-17 1885
使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（1） 使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（2） 对JSON协议拓展的探索 根据（2）中提到的比较有特殊性的JSON协议 {error: 'unknownMessage'}，在draw.io源码中搜索‘unknownMessage’，可以找到唯一结果，在editorUI.js的10417行发现parent.p...
在线图表编辑工具 draw.io 10.6.2 版本发布
weixin_33738578的博客
04-16 210
百度智能云 云生态狂欢季 热门云产品1折起>>> draw.io 10.6.2 版本已发布，更新内容...
Draw.io绘制UML图教程
热门推荐
踏雨歌青春，诗酒趁年华
02-22 1万+
本文是使用在线流程图设计网站draw.io绘制UML图的教程。draw.io 是一款强大的免费在线图表绘制工具，支持创建流程图、组织结构图、时序图等多种图表类型。它提供丰富的形状库、强大的文本编辑和样式设置功能，使用户能够轻松创建专业级图表。draw.io 具有用户友好的界面，支持实时协作，可以存储到云端服务，并提供多种导出选项。
使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（1）
weixin_41108690的博客
03-17 8795
正在编写的本科毕设项目中要求实现绘制UML图的需求，我搜索了一些相关的开源软件，发现了jsUML2、jTopo、PlantUML、Java UML Generator、JS-Sequence-Diagrams、draw.io等可参考的开源软件 （*具体介绍详见页面下方），经过考虑决定使用draw.io的嵌入模式。 因为找资料找到头秃，决定把自己做的一些工作记录下来分享给大家。才疏学浅，如有错漏欢迎...
draw.io:存放使用 draw.io 绘制的数据图
04-09
draw.io 是一个免费的在线图形绘制工具，专为创建各种图表和流程图设计。它提供了一种直观、易用的界面，使得非专业设计师也能轻松制作高质量的图表。用户可以利用 draw.io 创建各种类型的数据图，如流程图、组织...
draw.io mac版 非常好用的画图软件
01-21
《draw.io for Mac：一款强大的图形绘制工具》 在信息化高度发展的今天，图形化表达成为传达信息、设计流程和构思想法的重要方式。draw.io作为一款跨平台、免费且开源的在线绘图工具，深受广大用户的喜爱。而在Mac...
pictures:draw.io的草稿
03-16
图片 draw.io的草稿
Redux-react传输流程.drawio
08-20
Redux-react的数据传输流程，配套相关博客使用。 包括Connect加强，组件中Store的Action与Producer传输，在redux中使用Provider组件
draw.io 开源项目教程
gitblog_00254的博客
09-12 608
draw.io 开源项目教程 drawIO 项目地址: https://gitcode.com/gh_mirrors/dra/drawIO draw.io 是一个功能强大的...
CF2 开源项目使用教程
gitblog_00034的博客
08-16 490
CF2 开源项目使用教程 CF2Hierarchical Convolutional Features for Visual Tracking (ICCV 2015)项目地址:https://gitcode.com/gh_mirrors/cf/CF2 1. 项目的目录结构及介绍 CF2 项目的目录结构如下： CF2/ ├── docs/ │ ├── README.md │ └── ......
draw.io和plantuml替代visio画图工具(五)
Android系统攻城狮
01-04 6203
本篇目的：draw.io和plantuml替代visio画图工具目录1.drawio.网址访问.draw.io快捷键2.plantuml开源工具.网址。
drawio界面自定义配置
weixin_44112083的博客
09-21 9374
drawio 在“配置”界面，配置 json 实现更丰富的配置
Drawio中创建组件链接
weixin_38638223的博客
05-18 666
在Drawio中常常需要对两个有关的的组件做链接操作，用于在这两个组件之间的来回跳转。这篇文章简单介绍在Drawio中的创建两个组件的链接。在VsCode中下载Draw.io插件要实现的在下图的两个组件之间操作。当鼠标右击时能够跳转到,反方向也有同样的功能。鼠标点击组件，然后选择。
将drawable对象转为json遇到的坑
码龙-的博客
07-07 572
如图 要持久化存储一个对象，需要先将对象转化为字节流，我使用的是谷歌的gson，如图对含有Drawable的实体对象转string时，会，在转化的时候报了转化异常，需要先将drawable转化为string类型，然后 在main方法中使用gson转化 第17行报错： 实际上是 ...
画流程图都可以用哪些工具？
七小嗨少的博客
08-29 1543
在日常生活中，我相信我们很多人都看到过流程图。对于设计师来说，它还需要涉及流程图来反映用户的旅程和交互方式。那么你知道哪些流行的流程图设计软件呢？作为高级设计师，我今天推荐10款流程图设计软件。你可以和我一起读这篇文章！即时设计是国内一款专业级的 UI 设计工具，像 PC 端的网页，移动端的 App、小程序页面，都可以通过即时设计高效完成。现在，也有越来越多的设计师，用即时设计进行流程图、插画、海报、banner 等视觉类设计工作。即时设计提供了一些。
你知道和不知道的draw.io
qq_20245171的博客
04-22 805
draw.io 允许用户创建和保存自定义模板，满足用户特定的绘图需求，提高了工作效率。
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`，并通过组合的方式持有对原始组件的引用。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值