drawio_绘图利器:绘制ER图/连线/绘制思维导图/流图/vscode插件/选择绘图类型/画板大小/字体大小/主题图标和模板/流图风格直角圆角/线条样式批量修改

文章目录

• 官网教程
• • vscode插件
• 几何图形(元素)
• • 添加几何图形
  • • 悬停选取方式
  • 修改图形种类
  • 图形块的移动
  • 选中单个连通图图形群
• 调整画板区域大小
• 图像边界调节
• 连线样式调整
• • 调整连线两端样式
  • 编辑连线上的文字:
  • 流图风格(直角/圆角/曲线)
• 添加绘图类型的符号集
• • 添加更多图标
  • 绘制思维导图
  • • vscode mindmap
• 文字大小
• 关于line spacing
• • • 批量修改样式
    • 参考链接

官网教程

• 有许多视频,但是国内观看要有条件,还有blog
  https://drawio-app.com/diagrams-with-draw-io-for-confluence-our-new-user-documentation-is-online/

vscode插件

• Draw.io Integration - Visual Studio Marketplace

几何图形(元素)

添加几何图形

添加图形有多种方式

悬停选取方式

• 鼠标悬停于欲引出连线的图形元素的边框上
  
• 点击浮现出来的箭头,选取更多图形元素

修改图形种类

可以修改图形种类(譬如将已有的矩形(矩形时默认形状)改为菱形rhombus;椭圆形(ellipse)

方式有许多,包括

• 默认快捷键(ctrl+E)
• 右键图形,edit style
• 点击选中图形,右侧面板点击edit style
  

• 将头部的图形(如果是矩形就添加一个名称)修改为对饮的几何图形的名称;

图形块的移动

• 一般来说,可以通过框选来批量选中要移动的图形群
• 但是某些时候(特别是图形很多很复杂,那么通过连通图为单位来移动是不错的选择)

选中单个连通图图形群

配合快捷键效率更佳(alt+shift+d)(不是ctrl)

调整画板区域大小

• drawio 可以放大缩小,但是似乎没有直接调整画板(相对绘制的图形)大小的接口

• 不过drawio可以自动扩展画板(当您的图形元素溢出(或者被脱出当前画板时,就会自动扩展,而且会收缩视图)

• 扩张前

  • 

• 扩张后

  • 
  • 可以看到背后的栅格(画板变大)

图像边界调节

点击图形,橙色点住橙色的点拖动,可以调整曲线

连线样式调整

调整说明:
进入模式:
选择connection & waypoint 后进入一个模式

调整连线两端样式

无端点直线样式把line start 和line end 都设置为None即可(第一个选项)

编辑连线上的文字:

只需要选中线条,直接键入内容即可

流图风格(直角/圆角/曲线)

• 右侧给出三中风格
  • sharp(棱角风格)
  • rounded(即下图示例)
  • curved(曲线风格)
    

添加绘图类型的符号集

添加更多图标

例如添加UML常用形状集合

绘制思维导图

draw io 可以绘制思维导图,甚至可以和流图等其他形式结合起来

要点在于线条样式的选取

• 悬浮+拉取
  
• 或者,先画定几何图形(自定义)再拉出线条连接

vscode mindmap

• 如果仅仅绘制思维导图,那么vscode中相关的插件,专门绘制思维导图
• vscode-mindmap - Visual Studio Marketplace

文字大小

• 可以选中所有要输入文字的元素
• 然后到右侧面板中设置字体大小
• 之后输入文字的时候表现的字号就是一致的了

• 双击面板添加文字元素,上面的设置依然有效
  

关于line spacing

只有蓝色部分拉出来的线才可以使用line spacing
(包括line end spacing /line start spacing)

同时,还需要在拉到终点处是让另一个形状呈现出蓝色(而不是其他颜色的时候,这是释放鼠标,就能够看到效果(使得该线和终点图形保持固定的距离,即使拖动目标图形也是这样)

不生效的实例:(绿色)

同时,两个图形之间只有一条可以使用line spacing(绘制多条的话将会:要么重合,要么line spacing 不生效)

批量修改样式

• 批量选中元素
  • 可以鼠标对角线划出矩形框选
  • 也可以ctrl+a全选
  • ctrl+shift+v应用样式

某些线条无法由于接入到集合元素的槽点而无法完整应用样式(譬如line end)边距,您可以手动调整这些端点(边距生效要点如上个section所述)

参考链接

https://webapps.stackexchange.com/questions/113809/line-start-end-space-in-draw-io-doesnt-work