如何使用drawio画流程图以及导入导出

画一个基本的流程图

你可以在线使用drawio, 或者drawon创建很多不同类型的图表。 如何使用编辑器,让我们以一个最基本的流程图开始。

流程图,就是让你可视化的描述一个过程或者系统。 图形和很少部分的文字表达就可以让读者很快的理解他们需要什么。

创建一个空白的图表

1. 打开网站draw.io, 或者drawon.cn注册登录选择流程图。

2. draw.io官方网址默认会让你选择一个保存的设备。

注意:你可以选择其他位置存储你的图表文件, 如果你选择了云端存储平台,则你可能需要登录授权。

3. 点击创建新的图表,或者打开已经存在的图表

4. 在模板管理器中, 进入一个文件目录,选择空白图表, 点击创建。 就可以创建图表了。

在画布上添加图形

drawio, 或者drawon上,有很多种方式,在画布上添加图表。

添加的第一步——使用下面的方法中的一种方法,在画布上添加一个矩形,矩形代表你的流程的第一步。

  • (鼠标左键)点击通用图形库中的矩形,就可以添加到画布中。

  • 在画布上的空白区去双击打开图形对话框,就可以点击矩形图形添加。

  • 从通用图形库中,选择指定的位置,用鼠标拽出一个图形,就可以放置到你想放置的画布位置。

添加更多的图形——使用下面的方法添加其他图形,代表你在流程中的下一步。

  • 双标悬浮在你创建的第一个图形的上面,或者点击图形, 你将看到图形上会展示朝着四个方向的方向箭头。点击其中一个方向的箭头,选择选择一个图形添加,并在这个方向连接它。

  • 从图形库中拽出一个形状, 滑过你需要连接的已经存在的图形上,停留,直到你看到四个方向的箭头出现,其中有一个变亮,再放置到你想放置的位置,图形会自动的朝着你放置的方向连接起来。

你通过简单的点击左侧的图形库,可以添加多个图形,之后可以再进行连接。

对于流程图的形状含义解释

在流程图中,有很多不同的形状来表示不同的可视化含义。

  • 矩形——在流程中的基本步骤

  • 菱形——决断,通常时防 是/否的问题, 在这里将会把流程分成一个或多个分支。

  • 原型或者椭圆——在流程中可选的开始或者结束标识。

  • 平行四边形——输入或者输出, 用来在流程中表示,流程需要外部的或者需要给与外部的部分信息。

  • 圆柱体——存储盘,用于指示,在这一步数据会被存储。

  • 下边沿为波浪线的矩形——文档会被生成,表示在这一步的结果。

此外, 在通用和高级图形库中,你可以使用流程图库中的其他图形。

  1. 在左侧面板的底部, 点击更多形状。

  2. 点击流程图(Flowchat)的复选框。

  3. 点击应用,流程图库则在面板的左侧可见。

移动,改变大小, 旋转,删除图形

选择一个图形,点击它即可选择, 如果要选择多个图形, 按下shift或者Cmd,再点击要选择的图形,则可以选择多个。

移动——选择并拖拽图形到画布的其他位置放置即可。

改变大小——选择一个图形, 当出现一个双箭头的手柄,可以朝着箭头的方向或者想要的方向放大缩小图形。 如果希望图形是基于中线线变化,则同时按下control键拖动。点击可以跳转至如何改变一组图形大小

旋转——选择一个图形,右上角会出现一个旋转的抓手,点击旋转,则会以图形的中心点进行旋转。

删除——选择图形, 按下键盘的Backspace或者Delete键删除, 或者点击工具栏的Delete工具。

如果图形上的其中一个连接线或者箭头,方向错了, 你可以选择并删除它, 就像图形一样的方式删除。跟随下面的不住,手把手教你如何按照正确的方向绘制一个连接线。

技巧:使用键盘键盘上的方向键可以精准的旋转,从新放置位置,调整大小,点击该章节学习。

连接图形

连接器就是能够把图形连接在一起的连接线,根据需求,可以选择有或者没有或者两端都有箭头。有两种不同类型的连接器。

浮动连接器——当你在画布中移动或者改变图形的路径时,连机器的切入点,也会跟着形状的周长变化而移动。

固定连接器——当你在画布中移动或者改变图形的路径时,连接器的连接点的连接位置不会改变。

绘制一个浮动连接器

  1. 鼠标悬停在原图形的上方直到出现了方向的箭头,从按变量渐变出现。

  2. 把鼠标光标移动到你想要绘制的出口的箭头上,拽出线条到目标形状上。

  3. 鼠标悬浮到目标形状上,当目标形状的轮廓变绿,则释放鼠标。

当你移动图形到一个新的位置, 连接器会以最短的距离自动重新绘制,跟随到新的位置。

绘制一个固定连接器

  1. 鼠标悬停在原图形上,你将看到很小的十字交叉的连接点,在形状的周长线上。

  2. 从这个锚点(交叉点)上拽出一条线,朝着目标图形方向拽。

  3. 悬停在目标图形上,直到看到连接点的出现, 放置到其中一个连接点上, 释放鼠标,连接线自动吸附到目标点上。

先在,你可以看到,当你在画布中拖拽图形时, 连接器保持吸附在连接点的位置保持不变。

改变连接器的路径

航路点(Waypoints)就是你选择连接器的时候,出现在线路上的很小的圆形点。这些圆形点会定义路径,而这个路径就是连接器用来穿越画布的必经点。

  1. 选择连机器, 可以看到你要去改变路径的航路点。

  2. 拖拽其中一个航路点到新的位置,新的航路点有可能会增加,会根据你抓取的连机器的抓取点以及你移动的鼠标的位置而决定。

如果它是一个浮动连接器,最接近你移动的路径点的末端将围绕你的形状的周长“浮动”。如果它是固定连接器,则末端将保持继续吸附到它特定的位置。

你可以增加或者移除连接点, 使得连接器能够跟随更复杂的路径。

添加标签

图形标签

在图形上添加简短的标签,可以使得图形更容易更快捷的被理解。

  1. 在图形上双击,可以开始使用你自己的文本来代替已有的文本。 可选的,也可以单击图形,直接输入文本代替已有的文本。

  2. 按下回车键Enter保存文本。

技巧:按下Shift+Enter 可以在输入文本时,换行。

连接器标签

可以连接器的末尾,中间,开始部位,增加一个或多个标签。

  • 在连接器上的某个位置双击,则就可以在该位置添加标签。

  • 如果要重新设置连机器上的标签的位置,点击标签, 标签上会出现一个小钻石一样的图标,拖拽就可以改变位置。

如果你从新让连接器绘制路径, 你也许需要更新你手动改变位置的标签的位置。 但是通常,标签会智能的跟随链接器变化位置。

改变流程图的样式

一旦你完成了添加你流程图的所有的图形,连接器,标签,你就可以设置样式。

  1. 选择一个图形,或者按住shift, 点击多个图形和连接器,可以选择多个。

  2. 通过样式标签页,可以添加颜色和图形样式以及连机器。

    • 风格调色板,设置图形的填充色和轮廓颜色。 点击左右箭头可以浏览更多的样式。

    • 设置自定义颜色, 点击颜色按钮, 选择一种新的颜色, 或者输入十六进制的颜色编码

    • 设置选择的连接器的风格, 有箭头,双箭头,或者没有箭头。

    • 在文本标签页,可以改变文本的风格

      • 修改设置不同的字体。

      • 加载,斜体,下划线。

      • 改变文字的对齐方式, 左对齐,右对齐,或者居中对齐。

    技巧:当你编辑文本的时候, 你可以看到额外的HTML格式——添加编号,或者项目符号列表,缩进文本,可以使用上标,或者下标,或更多属性。

导出和分享你的流程图

你可以通过几种不同的方式,分享你的图表。通过文件->导出为菜单。

  • 可以导出PNG, JPEG, SVG, 把图表转换成图像,可以放到网站或者邮件里面。

  • 把整个图表编码成URL, 并导出URL, 当你分享这个很长的URL给其他人时,其他人去预览图表只是拿到了原来的拷贝版本,不会打开,编辑你原先的内容。

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

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

相关文章

07、SpringCloud -- jmeter 压测

目录 jmeter 入门jmeter 安装测试步骤测试数据模拟多用户操作1、创建http请求2、添加http cookie 管理器3、并发获取当前登录用户数据的效果4、添加多个用户模拟并发请求5、访问方法6、jmeter添加 CSV Data Set Config7、高并发执行访问的效果8、总结流程高并发秒杀压测jmeter …

Python 日期和时间处理教程:datetime 模块的使用

Python 中的日期不是独立的数据类型,但我们可以导入一个名为 datetime 的模块来使用日期作为日期对象。 示例:导入 datetime 模块并显示当前日期: import datetimex datetime.datetime.now() print(x)日期输出 当我们执行上面示例中的代码…

springboot web项目中 Set-Cookie 失败 办法

1. 背景 目前有个项目 线上环境 使用spring session管理的登录 项目中有两个接口 一个用来登录的 登录成功后会设置cookie 后续请求就会使用该cookie (cookie的键值就是session Id 和 登录后的信息 例如菜单,权限等) 一个用来检查是否登录…

LeetCode热题100 旋转图像

题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9…

2022年06月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 运行下列程序,输出的结果是?( ) tup1 (苏炳添, 谷爱凌, 北京冬奥会, …

VSCode编写Unity代码自动补全配置

1.下载并安装.NET 7.0(C#插件需要)和.NET Framework 4.7.1(Unity需要) .NET 7.0下载链接:https://dotnet.microsoft.com/en-us/download .NET Framework 4.7.1下载链接:https://dotnet.microsoft.com/en-…

cmd基本命令

一、cmd黑框是什么 cmd 是 Windows 命令提示符(cmd.exe)是 Windows NT 及以后的 Windows 系统下的一个用于运行 Windows 控制面板程序或某些 DOS 程序的shell程序;或在 Windows CE 下只用于运行控制面板程序的外壳程序。 二、打开步骤 wind…

H5游戏源码分享-命悬一线

H5游戏源码分享-命悬一线 在合适的时机跳下绳子&#xff0c;能安全站到木桩上&#xff0c;就通过。 游戏源码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name&…

多线程---阻塞队列+生产者消费者模型

文章目录 阻塞队列自己实现一个阻塞队列&#xff08;三步&#xff09;标准库中的阻塞队列使用阻塞队列的优势 生产者消费者模型 阻塞队列 队列&#xff08;Queue&#xff09;是我们熟悉的一个数据结构&#xff0c;它是“先进先出”的。但是并不是所有的队列都是“先进先出”的…

RocketMq源码分析(八)--消息消费流程

文章目录 一、消息消费实现二、消息消费过程1、消息拉取2、消息消费1&#xff09;提交消费请求2&#xff09;消费消息 一、消息消费实现 消息消费有2种实现&#xff0c;分别为&#xff1a;并发消费实现&#xff08;ConsumeMessageConcurrentlyService&#xff09;和顺序消费实现…

pre-existing shared memory block

发生原因: 1.服务器cpu、内存进行扩容 2.非正常关闭,导致任在占用共享内存段 解决方案: 根据shmid进行关闭 ipcs -mipcrm -m xxx

Kotlin协程核心理解

一、协程是什么&#xff1f; 1.1 基本概念的理解 我们知道JVM中的线程的实现是依赖其运行的操作系统决定的&#xff0c;JVM只是在上层进行了API的封装&#xff0c;包含常见的有线程的启动方法&#xff0c;状态的管理&#xff0c;比如&#xff1a;Java中抽象出了6种状态&#x…

windows8080端口占用

查看端口占用 netstat -ano | findstr “8080”查看占用进程 tasklist | findstr “4664”关闭占用进程 taskkill /f /t /im httpd.exe

读图数据库实战笔记03_遍历

1. Gremlin Server只将数据存储在内存中 1.1. 如果停止Gremlin Server&#xff0c;将丢失数据库里的所有数据 2. 概念 2.1. 遍历&#xff08;动词&#xff09; 2.1.1. 当在图数据库中导航时&#xff0c;从顶点到边或从边到顶点的移动过程 2.1.2. 类似于在关系数据库中的查…

操作系统 --- 存储器管理

一、简答题 1.存储器管理的基本任务&#xff0c;是为多道程序的并发执行提供良好的存储器环境。请问好的存储器环境”应包含哪几个方面&#xff1f; 答&#xff1a; 2.内存保护是否可以完全由软件实现&#xff1f;为什么&#xff1f; 答&#xff1a;内存保护的主要任务是确保每…

C语言_断言assert详解

一、assert定义 assert() 的用法像是一种"契约式编程"&#xff0c;在我的理解中&#xff0c;其表达的意思就是&#xff0c;程序在我的假设条件下&#xff0c;能够正常良好的运作&#xff0c;其实就相当于一个 if 语句&#xff1a; if(假设成立) {程序正常运行&…

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程

&#x1f9f8;注&#xff1a;不要看我的文件多&#xff0c;那是我的其他项目&#xff0c;这个项目所用的文件我会全部用红框框起来&#xff0c;没框的部分不用管&#xff0c;前端两个文件&#xff0c;后端一个文件 &#x1f4dc; 目录 首先&#xff0c;定义前后端交互接口 然…

强化学习中值函数应用示例

一、Gridworld Gridworld是一个用于教授强化学习概念的简化的电子游戏环境。它具有一个简单的二维网格&#xff0c;智能体可以在其中执行动作并获得奖励。这个环境是有限的&#xff0c;因为它有一个明确的开始和结束状态&#xff0c;以及一组确定的动作和奖励。 在Gridworld中&…

use renv with this project create a git repository

目录 1-create a git repository 2-Use renv with this project 今天在使用Rstudio过程中&#xff0c;发现有下面两个新选项&#xff08;1&#xff09;create a git repository (2) Use renv with this project. 选中这两个选项后&#xff0c;创建新项目&#xff0c;在项目目…

NEFU数字图像处理(三)图像分割

一、图像分割的基本概念 1.1专有名词 前景和背景 在图像分割中&#xff0c;我们通常需要将图像分为前景和背景两个部分。前景是指图像中我们感兴趣、要分割出来的部分&#xff0c;背景是指和前景不相关的部分。例如&#xff0c;对于一张人物照片&#xff0c;人物就是前景&…