draw.io基础操作和代码高效画图进阶

文章目录

    • 一、基础操作
      • 1、链接
      • 2、等比例变形
      • 3、复制
      • 4、插入表格
    • 二、在线打开
    • 三、插入—功能聚集地
      • 1、插入图片
      • 2、插入画笔
      • 3、插入布局
      • 4、导出
    • 四、图码转换——高效画图
      • 1、通用图码转换
      • 2、流程图生成:使用mermaid语言生成图:
    • 五、图码转换高效画图的典型用法
    • 1、批量修改所有的字体/线条—常用功能
    • 2、大模型生成流程图mermaid语言画图代码—高可用
    • 3、大模型生成mxGraph 库画图代码—低可用
    • 六、Diagrams 库
    • 其他
      • 1、将内容在html打开
      • 2、输入数学公式

一、基础操作

1、链接

1.1、自动连接图形
鼠标放在图形上,点击出现的箭头,会自动出常用图形
1.2、两种连接类型
(1)、固定连接
如果拖动其中一个图形的话,固定链接的形状会是曲线连过去。
方法:不要点击左边图形+鼠标放在边框上面左边出现绿圆点+鼠标左键点击图形的绿圆点不放+拖动链接另外一个图形的绿圆点

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
(2)浮动连接
如果拖动其中一个图形的话,固定链接的形状会自动变为直线连接。
实现方法1:鼠标放在图形边缘等待出现蓝色箭头,鼠标左键点击图形上的箭头不放+拖动链接到另外一个图形+再往前靠一点另外一个图形会变成蓝框+松手。
实现方法2:将两个图形靠近,点箭头自动连过去。

在这里插入图片描述

在这里插入图片描述

2、等比例变形

shift+小蓝点

3、复制

ctrl+d 快速复制
ctrl+拖动鼠标 快速复制
ctrl+c/v 复制+粘贴

4、插入表格

点击表格图标选择插入图表形状。
点击第二张图中红圈的黄点,改变成图标的形状。
在右边的设置框里调整图表的大小
在这里插入图片描述

在这里插入图片描述

二、在线打开

https://app.diagrams.net/

三、插入—功能聚集地

1、插入图片

调整图形—插入—图片

在这里插入图片描述

2、插入画笔

插入—自由绘图

3、插入布局

4、导出

使用draw.io导出的png或者svg等均含有xml信息,占用存储较大,但是可以再次导入draw.io进行编辑。

四、图码转换——高效画图

可以和大模型结合,由大模型生成代码,人工修改代码或图形,高效画图。

draw.io支持mxGraph的标记语言(Markup Language),用于在draw.io中描述图形模型的结构和属性。mxGraphModel是draw.io内部使用的一种格式,用于保存和加载图形模型数据。

1、通用图码转换

功能启用

(1)、点击 其他—编辑绘图

在这里插入图片描述

(2)、弹出代码框
在这里插入图片描述

2、流程图生成:使用mermaid语言生成图:

插入 —> 高级:支持插入txt、mermaid、sql、csv等格式的内容

在这里插入图片描述

五、图码转换高效画图的典型用法

这是个代码框用于调用mxGraphModel的标记语言(Markup Language),在draw.io中描述图形模型的结构和属性。mxGraphModel是draw.io内部使用的一种格式,用于保存和加载图形模型数据。

1、批量修改所有的字体/线条—常用功能

draw.io并没有提供全部选择一类对象,如线条、字体然后修改的功能。可以通过图形生成代码,然后修改对应的代码来快速完成。

其中代码修改可以由大模型修改代码,然后再讲代码粘贴回draw.io中修改。

2、批量插入图形
这是drawio的绘图语言,请在其中插入一个菱形,

注意:插入的图像代码要放在倒数第二行 前。

<mxGraphModel dx="977" dy="588" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="5TlSNR0lOvDpRwltdClC-1" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
      <mxGeometry x="200" y="280" width="120" height="60" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

2、大模型生成流程图mermaid语言画图代码—高可用

流程图mermaid语言画图代码相对简单,大模型可以较好的生成

3、大模型生成mxGraph 库画图代码—低可用

代码生成的mxGraphModel画图代码Bug较多基本无法运行。

Prompt :

使用mxGraphModel的标记语言在draw.io画一个网络图,其中包含3个思科交换机和一个网关,交换机都连接到网关上。请生成代码,其中交换机对象使用为xx

这个对象ID可以选一个交换机到画布,然后查看代码获取。一般在这一句style="shape=mxgraph.cisco.directors.content_engine_(cache_director)

六、Diagrams 库

diagrams 库可以用来画架构图。画好的图片可以插入draw.io或者生成xml导入draw.io。

安装:
Diagrams库依赖于开源的图可视化工具Graphviz,安装Graphviz后,通过pip 安装diagrams。

pip install diagrams

安装 graphviz2drawio库 ,将保存的graph转为xml,然后在drawio中导入。

from graphviz2drawio import graphviz2drawio

xml = graphviz2drawio.convert(graph_to_convert)
print(xml)

其他

1、将内容在html打开

注意:实际内容和菜单是反的,嵌入图片是网页,嵌入网页是图片。
1、文件—嵌入——图片/SVG。 会生成代码,将代码复制到txt,该后缀为html则会在页面打开,点击打开的页面上的图形则会在网页中呈现。
2、1、文件—嵌入——图片。 会生成代码,将代码复制到txt,该后缀为html则会在页面打开,页面上会有一个图形。
在这里插入图片描述

2、输入数学公式

1、打开 其他—数学排版
2、点击插入文本框
3、在文本框中输入公式 a^2+b^2=c^2 注意单引号要用键盘Tab 上面的键输入(即ESC键下面TAB键上面的~和单引号键)。
4、点击空白,文本框自动渲染为数学公式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/300404.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

超维空间M1无人机使用说明书——52、ROS无人机二维码识别与降落

引言&#xff1a;使用二维码引导无人机实现精准降落&#xff0c;首先需要实现对二维码的识别和定位&#xff0c;可以参考博客的二维码识别和定位内容。本小节主要是通过获取拿到的二维码位置&#xff0c;控制无人机全向的移动和降落&#xff0c;分为两种&#xff0c;一种是无人…

问题:为什么IP和端口一样的两个应用服务可以正常启动呢?

mysql安装 将MongoDB安装好并设置bindIP为0.0.0.0&#xff0c;端口为3306 发现问题&#xff0c;MySQL和MongoDB端口和IP一致&#xff0c;两个服务都能同时启动&#xff0c;这是为什么呢&#xff1f; 麻烦知道的大佬帮忙解答一下~~~

win10下安装detectron2-0.5(0.6应该也可以)

最近从github上下载的实例分割代码是detectron2-0.5的记录下配置过程。 1、前面什么pytorch基本步骤网上教程很多, 对着项目的要求下就行 2、到这里一般都是让你去下一个detectron2&#xff0c;但是我们从github上白嫖的项目都是有detectron2的&#xff0c;所以只需要找到那个s…

DQL命令查询数据(三)

本课目标 掌握MySQL的多表查询 SQL语句的综合应用 多表连接查询 通过各个表之间共同列的关联性&#xff08;例如&#xff1a;外键&#xff09;来查询的 分类&#xff1a; 内连接(INNER JOIN) &#xff0c;可简写为 JOIN&#xff1b;左外连接(LEFT OUTER JOIN)&#xff0c;…

【EAI 004】LLM+P:借助LLM和PDDL赋予机器人最优规划能力

论文标题&#xff1a;LLMP: Empowering Large Language Models with Optimal Planning Proficiency 论文作者&#xff1a;Bo Liu, Yuqian Jiang, Xiaohan Zhang, Qiang Liu, Shiqi Zhang, Joydeep Biswas, Peter Stone 作者单位&#xff1a;Department of Computer Science, Th…

【前端设计】小球loading动画

欢迎来到前端设计专栏&#xff0c;本专栏收藏了一些好看且实用的前端作品&#xff0c;使用简单的html、css语法打造创意有趣的作品&#xff0c;为网站加入更多高级创意的元素。 html <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…

【深度学习:Few-shot learning】理解深入小样本学习中的孪生网络

【深度学习&#xff1a;Few-shot learning】理解深入小样本学习中的孪生网络 深入理解孪生网络&#xff1a;架构、应用与未来展望小样本学习的诞生元学习小样本学习孪生网络的基本概念孪生网络的细节Triplet Loss架构特点关键组件训练过程主要应用领域未来展望示例图片结论 深入…

[AutoSar]基础部分 RTE 06 对runnable的触发和SWC的影响

目录 关键词平台说明一、runnable二、RTE的event2.1Mode类型event2.2周期触发类型2.3 数据交互触发 三、internal runnable value四、专属运行区指定五、per_instance memory 关键词 嵌入式、C语言、autosar、Rte 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商T…

Kali Linux——设置中文

【问题现象】 从下图可以看到&#xff0c;菜单全是英文的。对于英文不好的同学&#xff0c;使用起来很难受。 【解决方法】 1、获取root权限 su root 2、进入语言设置 dpkg-reconfigure locales 3、选择zh_CN.UTF-8 UTF-8 4、设置默认 5、安装完成 6、重启虚拟机 reboot…

深度学习数据集大合集—鱼类数据集

最近收集了一大波有关于各类鱼类的数据集&#xff0c;有淡水鱼、有深海鱼、有鱼的状态、有鱼的分类。大家可以详细查看。废话不多说&#xff0c;接下下来逐一的给大家介绍&#xff01;&#xff01; 1、鱼类检测数据集 包含鱼类的对象检测数据集 本数据集包含4种鱼类及其相关…

【数据结构—排序—交换排序】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、排序的概念及其运用 1、排序的概念 2、排序运用 3、 常见的排序算法 二、交换排序 1、冒泡排序 1.1算法讲解 1.2冒泡排序的实现&#xff1a; 1.2.1头文件的…

记.backward()报错

最近我在模型训练损失里加入了LPIPS深度感知损失&#xff0c;训练的时候就出现了如上的报错&#xff0c;具体解释为&#xff1a;调用梯度反向传播loss.backward()时&#xff0c;我们计算梯度&#xff0c;需要一个标量的loss(即该loss张量的维度为1,只包含一个元素&#xff09;&…

安装ps显示找不到MSVCP140.dll的多种解决方法,轻松解决dll问题

在使用Photoshop&#xff08;简称PS&#xff09;时&#xff0c;有时会遇到“MSVCP140.dll丢失”的错误提示。这个问题可能是由于系统缺少相应的运行库文件导致的。为了解决这个问题&#xff0c;我们需要采取一些措施来修复丢失的MSVCP140.dll文件。本文将介绍五个有效的解决方法…

【MySQL】索引基础

文章目录 1. 索引介绍2. 创建索引 create index…on…2.1 explain2.2 创建索引create index … on…2.3 删除索引 drop index … on 表名 3. 查看索引 show indexes in …4. 前缀索引4.1 确定最佳前缀长度&#xff1a;索引的选择性 5. 全文索引5.1 创建全文索引 create fulltex…

dnSpy调试Web应用程序

文章目录 前言一、dnSpy是什么&#xff1f;二、如何使用dnSpy三、如何调试Web应用程序四、下载总结 前言 dnSpy是一个.NET程序集调试器和编辑器&#xff0c;主要用于调试和编辑没有源码的.NET程序集。 一、dnSpy是什么&#xff1f; dnSpy是一个.NET程序集调试器和编辑器&#…

静态网页设计——极乐迪斯科(HTML+CSS+JavaScript)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a; https://www.bilibili.com/video/BV11k4y1X7mH/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术&#xff1a;HTMLCSSJS&#xff08;…

SpringCloud系列篇:核心组件之配置中心组件

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.前言 二.配置中心组件是什么 三…

揭秘六大热门认证考试

六大热门认证考试是什么❓今天为大家详细解读PMP、ACP、CDGA、软考中项、软考高项、NPDP、CISP等热门认证考试&#xff0c;让你不再彷徨&#x1f447; 1️⃣PMP &#x1f451;PMP认证是全qiu公ren的项目管理专业认证&#xff0c;旨在评估项目管理人员在项目过程中所需的知识、技…

重生奇迹MU游戏中勇者大陆

玩重生奇迹MU&#xff0c;我们进入游戏首先会来到勇者大陆。在看到勇者大陆市场&#xff0c;有很多交易的玩家也在这里&#xff0c;在勇者市场里面有商店。接下来介绍主要的NPC 的作用和怪物有那些&#xff1f; 勇者大陆卖药的商店老板莉雅 商店里面会有卖治疗药水&#xff0…

06-微服务-SpringAMQP

SpringAMQP SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; 自动声明队列、交…