| draw.io基础操作、代码高效画图和批量操作图形 | 您所在的位置：网站首页 › 360度转弯的图形是什么意思 › draw.io基础操作、代码高效画图和批量操作图形 |
draw.io基础操作、代码高效画图和批量操作图形
|
文章目录
一、基础操作1、链接2、等比例变形3、复制4、插入表格改变文字方向
二、在线打开三、插入—功能聚集地1、插入图片2、插入画笔3、对齐/等距分布和对齐到网格4、美化样式5、修改画布大小6、导出7、删除形状8、替换形状
四、图码转换——高效画图1、通用图码转换2、流程图生成：使用mermaid语言生成图：3、大模型生成流程图mermaid语言画图代码—高可用4、大模型生成mxGraph 库画图代码—低可用
五、批量操作图形1、批量修改所有的字体/线条/颜色—常用功能案例1、批量将矩形的高度改为50案例2、批量将线条的宽度改为2案例3、批量将所有图形的边框改为填充色
六、Diagrams 库七、嵌入WPS/office1、复制为图像
八、分页九、流程图自动布局其他1、将内容在html打开2、输入数学公式
一、基础操作
1、链接
两中链接的区别在于点绿色的点还是蓝色的箭头。 1.1、自动连接图形 鼠标放在图形上，点击出现的箭头，会自动出常用图形 1.2、两种连接类型 （1）、固定连接 如果拖动其中一个图形的话，固定链接的形状会是曲线连过去。 方法：不要点击左边图形+鼠标放在边框上面左边出现绿圆点+鼠标左键点击图形的绿圆点不放+拖动链接另外一个图形的绿圆点。
shift+小蓝点 3、复制ctrl+d 快速复制 ctrl+拖动鼠标 快速复制 ctrl+c/v 复制+粘贴 4、插入表格点击表格图标选择插入图表形状。 点击第二张图中红圈的黄点，改变成图标的形状。 在右边的设置框里调整图表的大小
方法1：插入文本框，然后缩小文本框的宽度，类似PPT。 https://app.diagrams.net/ 三、插入—功能聚集地 1、插入图片调整图形—插入—图片
插入—自由绘图 3、对齐/等距分布和对齐到网格方法1： 先选中图形 调整图形——对齐/等距分布 方法2： 选中图形—右键 对齐到网格在最下面。 不选中图形 —样式，注意：不能选中某个图形，选中图形右边的设置部分会针对某个具体的图形设置，无法对全面流程图美化样式。 方法1：文件—页面设置 方法2：右边设置框——最下面页面尺寸 6、导出使用draw.io导出的png或者svg等均含有xml信息，占用存储较大，但是可以再次导入draw.io进行编辑。 7、删除形状保留连接线：直接选中形状，点击Delete或者Backspace 同时删除连接线：选中形状后，点击Ctrl + Delete/Backspace 8、替换形状
###9、 翻转箭头 右侧设置框—调整图形——翻转（在第三行） 四、图码转换——高效画图可以和大模型结合，由大模型生成代码，人工修改代码或图形，高效画图。 draw.io支持mxGraph的标记语言（Markup Language），用于在draw.io中描述图形模型的结构和属性。mxGraphModel是draw.io内部使用的一种格式，用于保存和加载图形模型数据。 1、通用图码转换功能启用 （1）、点击 其他—编辑绘图
（2）、弹出代码框 插入 —> 高级：支持插入txt、mermaid、sql、csv等格式的内容
流程图mermaid语言画图代码相对简单，大模型可以较好的生成 4、大模型生成mxGraph 库画图代码—低可用代码生成的mxGraphModel画图代码Bug较多基本无法运行。 Prompt ： 使用mxGraphModel的标记语言在draw.io画一个网络图，其中包含3个思科交换机和一个网关，交换机都连接到网关上。请生成代码,其中交换机对象使用为xx 这个对象ID可以选一个交换机到画布，然后查看代码获取。一般在这一句style="shape=mxgraph.cisco.directors.content_engine_(cache_director) 五、批量操作图形这是个代码框用于调用mxGraphModel的标记语言（Markup Language），在draw.io中描述图形模型的结构和属性。mxGraphModel是draw.io内部使用的一种格式，用于保存和加载图形模型数据。 1、批量修改所有的字体/线条/颜色—常用功能draw.io并没有提供全部选择一类对象，如线条、字体然后修改的功能。可以通过图形生成代码，然后修改对应的代码来快速完成。 其中代码修改可以由大模型修改代码，然后再讲代码粘贴回draw.io中修改。 案例1、批量将矩形的高度改为50方法一：如果矩形能全部选择到，则全选修改右边的配置框的调整图形。 方法二：如果矩阵不能全部选择到。 1、提取代码 2、粘贴到txt 3、ctrl+h 替换为 height=“50” 2、批量插入图形 这是drawio的绘图语言，请在其中插入一个菱形， 注意：插入的图像代码要放在倒数第二行 前。 案例2、批量将线条的宽度改为21、语法：edge=“1” 表示这是一条线，因此通过来搜索线， strokeWidth=2表示线的宽度，要想改线条的形状要改style=中的内容。这里我们在html=1的分号和双引号之间插入strokeWidth=2，来修改格式。 2、用python的re模块来完成。 import re def replace_html_attribute(content): # 查找所有匹配的元素 pattern = r'' matches = re.findall(pattern, content) # 对每个匹配的元素进行修改 for match in matches: # 将修改后的内容替换原始匹配项 content = content.replace('html=1;', 'html=1;strokeWidth=2;') return content content = ''' 在这里写入mxgraph语言 ''' # 执行插入操作 result = replace_html_attribute(content) print(result) 案例3、批量将所有图形的边框改为填充色1、语法： fillColor属性是填错的图像颜色，borderColor和strokeColor在不同的情况下指边框的颜色，一般是strokeColor起作用。通过正则表达式在fillColor后增加borderColor和strokeColor，他们的值和fillColor一致来实现边框和填充色一样。 注：纯白色填充色无法修改边框为白色，因为白色填充时mxGraphModel代码中没有fillColor字段。 2、代码 将输出的代码粘贴到draw.io中编辑语言部分 import re # 输入的代码 code = ''' xxxxx ''' # 使用正则表达式找到所有包含fillColor的行，并在其后面添加borderColor和strokeColor pattern = r'(? |
（2）浮动连接 如果拖动其中一个图形的话，固定链接的形状会自动变为直线连接。 实现方法1：鼠标放在图形边缘等待出现蓝色箭头，鼠标左键点击图形上的箭头不放+拖动链接到另外一个图形+再往前靠一点另外一个图形会变成蓝框+松手。 实现方法2：将两个图形靠近，点箭头自动连过去。
拉圆点缩小文本，即可竖排。 
方法2：直接插入文字，然后调整方向。缺点只能逆时针转90°，文字是倒的。 
点击箭头 
【本文地址】