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 graphviz2drawioxml = 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、点击空白,文本框自动渲染为数学公式。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++八股学习心得.7

1.在 CGI 中使用 Cookies HTTP 协议是一种无状态的协议。但对于一个商业网站&#xff0c;它需要在不同页面间保持会话信息。例如&#xff0c;一个用户在完成多个页面的步骤之后结束注册。但是&#xff0c;如何在所有网页中保持用户的会话信息。 在许多情况下&#xff0c;使用…

locust 快速入门--HttpUser与TaskSet

背景&#xff1a; locust 压测是以模拟一定用户数量完成指定操作实现的压测。 它的基础维度是用户数量&#xff08;HttpUser&#xff09;&#xff0c;压测时指定多少用户数&#xff0c;就会有相应的HttpUser实例。 用户的操作行为定义&#xff0c;是通过一个个task装饰的方法实…

探秘 JAVA 工厂模式:深度详解与实例分析

探秘 JAVA 工厂模式&#xff1a;深度详解与实例分析 前言: 欢迎阅读本篇博客&#xff0c;我们将深入研究 Java 中一种设计模式——工厂模式。工厂模式是一种创建型模式&#xff0c;它提供了创建对象的最佳方式之一&#xff0c;有助于将对象的创建与使用解耦。 1. 工厂模式简…

静态网页设计——旅游景点介绍(HTML+CSS+JavaScript)

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

2024.1.7力扣每日一题——赎金信

2024.1.7 题目来源我的题解方法一 哈希表方法二 数组 题目来源 力扣每日一题&#xff1b;题序&#xff1a;383 我的题解 方法一 哈希表 使用哈希表记录ransomNote中所需字符的数量&#xff0c;然后遍历magazine并将哈希表中存在的对应的数量减一 时间复杂度&#xff1a;O(nm…

Code Runner使用外部控制台,运行结束后等待用户输入

问题描述 网上让程序运行结束暂停的方法大多数只有两种&#xff1a; 1.末尾加上system(“pause”) 2.start /k cmd 第一种方法每一个程序都需要在最后加上这条命令很烦&#xff1b; 第二章方法cmd窗口在程序运行结束后不会自动关闭&#xff0c;需要用户手动关闭 我想找到一种…

鸡尾酒效应通俗解释,举一个具体的例子。

问题描述&#xff1a;鸡尾酒效应通俗解释&#xff0c;举一个具体的例子。 问题解答&#xff1a; 鸡尾酒效应&#xff08;Cocktail Party Effect&#xff09;是指在嘈杂的环境中&#xff0c;人类大脑能够在众多声音中专注于一些特定声音并加以理解。这种现象显示了人类听觉系统…

PyTorch|构建自己的卷积神经网络--池化操作

在卷积神经网络中&#xff0c;一般在卷积层后&#xff0c;我们往往进行池化操作。实现池化操作很简单&#xff0c;pytorch中早已有相应的实现。 nn.MaxPool2d(kernel_size ,stride ) 这种池化叫做最大池化。 最大池化原理很简单&#xff0c;就是一个filter以一定的stride在原…

NACHI机器人虚拟示教器报I2101异常

前言 机器人示教器报&#xff1a;I2101 异常停止按钮或外部停止信号被输入 无法再示教模式下进行程序的运行&#xff01; 解决方法 结果 最后测试可以正常的运行程序

PHP文件代码加密系统,可批量全开源

代码文件加密系统 在程序运行时&#xff0c;实质上是在执行机器码&#xff0c;而虚拟机语言的基本概念是将程序加密到一定程度&#xff0c;也就是说&#xff0c;经过加密的PHP程序在执行时会被解密成opcode继续执行。 PHP在执行时会生成opcode&#xff0c;然后由Zend虚拟机继…

计算机网络(第8版)名词解释

1.ICMP 网际控制报文 允许主机或路由器报告差错情况和提供有关异常情况的报告 2.RIP路由信息协议 是一种分布式的&#xff0c;基于距离向量的路由选择协议 3.BGP 外部网关协议 是不同自治系统的路由器之间交换路由信息的协议 4.IGMP 网际管理协议 使用多播路由器知道多播…

Spring之单元测试

Spring提供了一个运行器&#xff0c;可以读取配置文件&#xff08;或注解&#xff09;来创建容器。 1 整合Junit5 1.1 引入依赖 <dependencies><!--spring context依赖--><!--当你引入Spring Context依赖之后&#xff0c;表示将Spring的基础依赖引入了-->…

JDBC-数据库连接池(druid)

一、背景 在介绍JDBC基本概念中&#xff0c;似乎Java程序每次与数据库交互都要通过驱动创建一个新的连接对象&#xff08;Connection&#xff09;&#xff0c;再由连接对象创建一个可执行SQL的Statement对象&#xff08;或PreparedStatement对象&#xff09;&#xff0c;操作完…

Postman实现压力测试

从事软件开发对于压力测试并不陌生,常见的一些压测软件有Apache JMeter LoadRunner Gatling Tsung 等,这些都是一些比较专业的测试软件,对于我的工作来说一般情况下用不到这么专业的测试,有时候需要对一些接口进行压力测试又不想再安装新软件,那么可以使用Postman来实现对…

Redis之集群选举原理分析

当slave发现自己的master变为FAIL状态时&#xff0c;便尝试进行Failover&#xff0c;以期成为新的master。由于挂掉的master可能会有多个slave&#xff0c;从而存在多个slave竞争成为master节点的过程&#xff0c; 其过程如下&#xff1a; slave发现自己的master变为FAIL。将自…

为什么圈子里面的很讨厌阿里巴巴出来的CTO

在杭州的互联网公司&#xff0c;有一个不争的事实&#xff0c;那就是独角兽公司的CTO几乎都是阿里背景的&#xff0c;且都是高P的&#xff0c;当然很少有高M的&#xff0c;高M的基本上都是自己开公司做CEO或者是做业务总裁了。 为什么会这个样子呢&#xff1f;当然还是由于阿里…

vue使用elementui 的 table且自定义某列表头时,添加的点击事件和自带的筛选功能有类似冒泡行为

element 自带的table 需求&#xff1a;在时间这一列的筛选按钮旁边添加一个批量修改按钮问题&#xff1a;如果不加排序这个属性&#xff0c;那么表格自带的筛选和新加的批量筛选点击事件会冲突&#xff08;冒泡事件&#xff09;解决方法&#xff1a;在该列添加sortable属性&…

吉林大学分布式计算系统题目解析

分布式计算题目解析 填空题 1、名字按结构可分为&#xff08;&#xff09;和&#xff08;&#xff09; &#xff08;绝对名字&#xff09;和&#xff08;相对名字&#xff09; 绝对名字&#xff1a;这是完全确定的路径名字,也就是从根目录开始的完整路径。例如在文件系统中…

学习笔记 | Kafka

一、概述 定义 1、Kafka传统定义&#xff1a;Kafka 是一个分布式的基于 发布/订阅模式 的消息队列&#xff08;Message Queue&#xff09; &#xff0c;主要应用与大数据实时处理领域。 2、发布/订阅&#xff1a;消息的发送者不会将消息直接发送给特定的订阅者&#xff0c;而…

一起学docker(六)| docker网络

Docker网络 不启动docker&#xff0c;网络情况&#xff1a; 启动docker&#xff0c;网络情况&#xff1a; 作用 容器间的互联和通信以及端口映射容器IP变动时候可以通过服务名直接网络通信而不受影响 常用命令 docker network --help 查看docker网络相关命令docker network…