drawio 安装PlantUML 插件

很好，来让我们再继续了。成功了哈，尤其是刚才那个换的那个方式，超赞的。好，那我发现它里面还有一个小工具，就是像这个。我如果现在呀再重新放一次矩形进来。好，您会发现呢？我的矩形放进来之后，好，老师先把那个线对好， 我的矩形的尺寸是不是长得不太一样，对吧？我的矩形的尺寸，那我希望他的尺寸呢？可以是固定的，我先把他先拉一下来，我希望他的尺寸可以跟他一样大。一般来讲我们会怎么做？我们可能就会去调整尺寸表 对，当他尺寸长得一样的话，我们可以去调整他的尺寸表，所以我们当我们去调整那个尺寸的时候啊，我一直要把他拉好拉没拉好。好，我先把他对好，没有对好心情很难过。好，来， 当我现在把它换好之后。 ok， 你看到这两个是不太一样，这三个都不同哦，我想要他长得跟他们两个一样，而我不是用复制的来，他右边的调整这里 有功能叫做 copy size， 很特别哦，复制他的大小跟贴上大小，所以这时候你可以复制前方这一颗复制 copy size 点他好过来贴上 size， 他就一样大。那因为他有圆角局，所以把圆角局拉走， 你看就一样大，我们看看拖进来的时候两个是一样大的，你们看一样大的，所以他可以卡比赛。我觉得这个还蛮好笑的，就是他可以复制他的 他的大小，反而不是复制格衫复制他的大小，想了解吗？好，我从拉怎么拉都拉不好。 ok， 好，再来。然后老师现在，呃做的差不多之后呢，我们来看一下一个重点 就是对齐方式，对齐方式好，来，如果我们要进行对齐方式的话，老师用这个例子的原因是因为，来我们看一下哈，当你在画的时候， 你有可能画一画之后，这里歪歪掉的，歪掉的，像这个就整个是乱七八糟的歪掉。好，那当他歪掉的时候呢？好，同学可能要注意一下下， 当他歪掉了，那我怎么样让他可以是比较好的？就是对齐会漂亮的好，我们通常对齐的部分有两种，一个是对齐跟均分有这两大类。好，那通常我在对的时候是这样，我一定会先找主轴， 所有的一张图画下来，不管是直的或横的，他一定有个主轴，知道吗？你要先把那个主轴找出来，所以我的做法是我会先去找我的主轴 在哪里，那这一条线呢？就是我的主轴，这也是一个横的，也是好，我就会先把主轴对齐好后，再来对左右两边，所以这时候呢，我们会再这样做。好，哎，你可以好，对不起，应该这么说好，通常来讲，你找的时候， 你看我这个例子，我是不是这一条是主轴，然后这个是他的次的次要的，因为就是很像是次要的好，我的习惯会先从次要的开始。 怎么说呢，你先从吃药对起先开始，因为这三颗先对好，是不是他三个就是一个物件，当 它是一个物件后，我就可以把这个物件拿到主轴来，主要对齐。所以同理，如果我画的时候，我是画这样横的，这有个主轴线，然后这边刚好延伸出次要的，你就先 把次要的对好，对完之后他是一个固定的物件的，你再来跟主轴对，他才会是漂亮的，刚刚好在正中央，这是个技巧，技巧知道吧？先从次要的，对， 是要一条一条线，对完了，你再来对主轴的线，他的对起就会非常的漂亮，更精准。好，来，所以呢，我先把这三个对好，那这三个你就可以自己大概简单搬一下下，你想要放在哪里？好，这三个先对好了，我把它放大喽，来这里。 好，这三个的线呢，我们先把它调一下下，这里好，调一下下。好，这三条线老师调好之后，老师调好之后再来呢，我就要把这三个框起来， 这是不是按到阴影啊？感觉像阴影，也没有刚按到阴影。来这边，然后这个要有底色了。好，来，这三个先 框起来，框起来之后呢，来到上头上面这边呢会有个叫调整，调整的工具，其实在右侧这边有个调整，一样的做个调整，然后在调整面板中呢，你就会发现他下面这边就会有个对齐，跟等距分布好， 对齐看图像最精准，你不一定要去看什么靠左靠右，什么上下都不用，不用去看左还是右，你看图像就好，我们是不是这个方向性，所以就一定是这一条横的直的就是这个对齐看你的方向性，所以老师是横的，我觉得他们自动对齐， 那你靠下也无所谓，你靠上也无所谓，反正这他们就可以对在一起了。好，再水平均分，这样调，看懂吗？我会先把这三个调好，好，这三个调完之后呢，再来他们的物件调好了，然后呢， 我就可以让这三个好，他这里有一个功能，我拉上去一点叫做合并，有看到吗？ 合并，老师把这三个对完之后，他变成一个单独的物件。好，这时候呢，老师就会点合并。合并是什么？其实是群主，他不是真的全部粘在一起。记得他翻译的问题，这三个 他叫做合并，是群主， ctrl 区通常都是群主的意思，知道吗？好，来这个。好喽，他们就是一个物件的，一个物件的。好，接下来呢，老师会再缩小一点， 好，把大家全部一起框起来， ok 吗？好，然后嘞，对齐， 那因为你上面这边有个调整往下滑，好在这一区对齐跟 呃等距分部位没看到，我会让他先对齐再均分，所以我们要让他垂直之中。 ok， 垂直之中对，然后对完之后呢，再均分。可是问题来，你看他这个地方是不是整个招金啊？你看下面这里 不是左右还有两颗吗？你一均分后他是全部黏在一起的。好，他这个地方的群主观念讲实话没有像 beau 这么的强， becea 这样对就会对的很漂亮，可是他只要一均分，他会连同他本来 ctrl 居里面的又跑进去了，知道吧？好，所以这个就要舍弃他哦，来复原哦， 我先复原一下。哎，好，这时候在对的时候要怎么对呢？我会舍记掉他，我会先不动这一条，我会先把这一区对好，这一区图像先对好，好让他垂直均分好。然后呢？呃，垂， 垂直分散距离，看懂老师意思吗？垂直分散哈，垂直分散之后他们就会是，呃这几个区块的中间。 好，等一下他的垂直感觉没有很垂直，再一次哈，四颗图案就好了。好，然后再呢，你就可以点选对齐跟垂直均分， 好像垂直好像没有很对，垂直吧，感觉上有有点落差，发现没？还有点落差，所以这个怪怪的。好，来，那我们继续，然后突然我就会这样，对齐完之后呢，我才会去对最后一个，因为最后一个他是群主， 他是群主的逻辑，所以你如果这个地方是群主的时候，这一区我就可以用群主的方式直接动一下下他就对了，刚刚好了，知道是意思吗？所以如果你要对齐很重要，你就是除了自己去手动拉之外，你就要记得他有这样的一个工具。然后另外呢，在拉的时候 小心，你看你这样框，他会连同线也一起选，文字方块也一起选，所以有时候会导致与对齐不精准，因为他对的时候连同线段都会影响，你看像这个线段都会跑掉，他对的时候会有这种问题，所以你看我把它还原一下下。哦，好，我在使用的时候我就尽量是选图像， 选图像你看到吗？选图像就好。然后呢，对齐跟均分你们看他会比较好一点点，那这个地方因为每一颗图像的大小不同，所以他的均分，哦，这个 他的军分应该包含着图像本身，就是图像距离加间隔距离一起算他的军分不像我们一般所认知的军分的时候是单独间距的军分，他连同图像也包进去，这样有些会那么细， 他的那个均分的功能不太一样，所以这边肯定要特别注意一下，他没有让我们可以设定说他等距的方式怎么做，感觉上他的等距应该是连同物件都一起算进去的，不是那么单纯，只有在线段上好，那这边的 就会有这个问题，你就要记得在调的时候可能就用下面的格线，通过格线去大概算一下一两个位置，一两个位置就好，但至少对齐下来是没有问题的。那你对完之后这个再过来一点点。 好，他其实整个对下来就会是漂亮的，这样 ok 吗？对，这个地方还是有点小问题啊，就他对齐的时候的顺序的概念， 所以他后面有格线，你可以用格线去调整他就好了。好吧，来这段练习一下下哦，均分对齐 好，试一下，但还可以的。还可以的，你就整颗洞盖。还好 这个存档哦， 要记得存档哦。 好，这段 ok 了，往上看哈。好，那我们再往下喽，我们再往下。

介绍给大家一款轻量级的万能代码编辑工具，微钥匙扣的，它呢不仅支持 cc 加加加瓦拍绳等编程语言，它还可以绘制流程图， 它里面内嵌有多 io 插件，其实除了这个插件还有其他的插件，那今天呢，我们主要用到多 io 这个插件，用它来绘制流程图。 什么是流程图呢？以特定图形符号加上说明表示算法的图成为流程图。我们可以把流程图呢理解成一种图，是描述事物进行的过程，程序经常用它来搭建产品框架，设计代码逻辑，这样看起来一目了然， 好不好用，我们先来试一下。首先我们打开我们的 vsco 的，然后在这里点击扩展按钮，输入我们的做 io 这个插线名字，然后呢我们再点击安装， 那安装好了之后呢，我们看到第三项，接下来就是绘制流程图测试一下了。首先我们点击我们那个微钥匙扣的左上角文件， 嗯，然后我这里呢先新建一个文件夹吧，新建文件夹的好处，比如说分类吗？然后我们再新建一个文件，测试一下这个文件的后缀名，要注意一下是左 io。 文件创建好之后呢，我们直接打开就可以弹出这么一个窗口，绘制流程图的窗口。然后我们来认识一下几个常用的流程图符号，这个呢叫连接 线，我们看到它是有一个箭头的，这个箭头呢是用来表示流程进行的方向。然后我们再来认识一下这个矩形框，它是一个活动标志，活动的简陋说明呢，我们携带矩形类。 然后呢是这个椭圆符号，用来表示一个过程的开始或者结束，我们的开始和结束呢写在符号内。然后我们再来认识一下这个菱形符号，它主要用作判断， 用来表示过程中的一项判定，或者呢一个分叉点，就好像说黄色的树林里分出两条路，你该走哪条呢？在菱形符号里面呢，我们主要是写判断，这是一个判断节点，这里呢是活动要执行的 处理活动执行。然后这一个带圆角的矩形呢，或者你可以用一个椭椭圆形用来表示开始获得结束， 就是比较常见的最基础的一个图形符号了。然后呢我们看到我们点击这个图形右边呢，其实还可以让我们的图形变化成我们想要的颜色。然后呢我们再回到我们的文档，这四个基本图形符号呢，我们都认识了。 然后呢我们再认识一下程序中最基本的三种结构之顺序结构， 这个顺序结构呢他就是从上往下依次执行，他会用到刚刚说的其中三种图形符号。然后我们来开始画 我们的第一个流程图，画一个最简单的买火车票上车。首先呢我们继续是新建一个做 io 文件， 名字就叫顺序结构。那么买火车票上车他大概的几个步骤 流程应该是什么样的呢？首先应该我们要进火车站，然后呢排队买票，再然后呢，嗯， 买到票了要干嘛？要候车，然后再检票，然后最后上车，那这整个呢就是一个顺序结构， 那首先呢我们要拖一个带圆角的矩形，代表着开始进入火车站，然后下一步是什么呢？我们要用到一个箭头，代表着下一步要做的，留 到哪里去呢？留到我们的排队买票活动，这时候就是一个矩形框了，然后下一步要做什么呢？下一步还是一个矩形框，再用我们的箭头流向矩形框，然后这时候是干什么呢？候车好，候车之后呢是检票， 检票了到最后上车就是最后一步了，就是结束了，这时候呢又要用到一个带圆角的矩形框，代表结束， 然后呢我们发现这个矩形框它都是同样的颜色，其实我们的开始跟结束可以用同一种颜色， 我们在右方点击我们的符号，在右方呢是可以选择我们框的颜色，还有一些样式啊等等，反正自己去修改，我这里比较粗糙的流程图就画出来了。

好，我们接着昨天的课程，昨天我们讲了一个呢，就是 这个没扣的软件的一个基本的一个编程，那么还有一个成绩顺序执行的一个概念，那么大家也可以看到大概是这个样子，执行的话就是这个板子上面模拟显示的这个。那么今天我们要讲什么呢？ 啊，之前我漏了一一个很重要的一个东西，那这个东西是什么呢？流程图 啊，桌，还有那么这么一个软件啊，下面呢是他的一个那个网址啊，我已经把它放在这里了，大家可以按照这个可以去看一下。 那么现在打开 好打开这个网址网一开始进去呢，大概是这个样子的。 那么我们首先讲呢，为什么要有这个流程图呢？主要就是第一个作用呢，就是可以用来训练 你的编程的一个思维，就说用流程图来规范你的一个思路，你要知道这样做了流程图以后呢，你就知道你自己到底在做些什么东西， 应该怎么样去解决问题。 那么 还有一个就是说，那么从小呢有我写流程图，或者说把基本的几个流程图呢，全部都给他弄的明白了，都能写的出来。那么 基本的一个编程的概念呢，也不管你学什么语言，那么其实都是一样的，那么套路都是一样的。 那么这个留张图啊，如果你熟练以后呢？当然你说哎，这个我不用写了，我已经知道应该怎么做的。那么从一开始的时候呢，训练的时候呢，那这个还是我认为还是很重要的，特别对于小朋友来说。 那么我们现在回过头来看，那么这个桌还有这个软件，那么登录进去呢，就是这个样子，那么首先 首先呢这个呢网址呢，他是在外网上的，那么有大家登录时候有时候会有点困难对不对？ 那么我已经把它都有下载，下载了一个离线的一个软件，那么大家呢也可以私下啊，私信我，有需要的话我可以给你发过来。然后比如说我可以把它放到白头云上面给大家来下载。 那么现在开始，那么我们进入这个网站以后呢，首先他会进入这么一个界面，那我们可以他要求我们主要是把这个流程图存在什么地方，那么可以存在云上面，还有勾勾的 give up， 那么我们可以 decide， 就是晚一点决定，我们再没想好放哪里，那么进去以后就看到这么一个东西好，然后呢我们大家看到这个地方， 大家看到这个地方呢，都是有些方块图，这个有点像，是不是像我们这个样子，这些这些东西一样，那么他都是可以 把它拖出来的，那么这里有个画布，我们可以把它拖出来，你看看这个对不对啊，都是可以拖出来的。 那么大家看到这个每一个上面呢，都是有很多个箭头的，还可以扩展，那么他这些点有什么用呢？好，我们来演示一下，这是第一个 ok， 那这里有线 啊，有曲线的箭头，那我们点一下这个，大家可以看到 这拉的太多了 哎，可以把它连起来，这个我没有连，没连上 好，重复来一下好脸上了。大家看到这个地方，点上有个圆圈圈， 那么他已经连上了，不管我们往哪边移动，那么这个线他都会连在一起。这个怎么连上去呢？这个多练习一下都基本上就可以了。看到我们还不够熟练的样子，那么这个有什么用呢？ 那么回过来看我们的程序，据说我们要写这样的一个非常读出来，我们要显示零，显示一，一直到九。好， 那我们可以在这里打张字，比如说哎，写上中文 显示， 对吧，我要了显示零。那么就说从一。这次程序一开始，一开始 star， 我讲的是大从重新开始的地方好，他就显示零。那么接下来呢，我们再显示什么？我们拷贝一下，我们再把它复制到这， 太最终了。 我们直接从这里来 这里拉，我们不把它拉，原来我们从这里把它点出来，这有点麻烦，直接从这里 有时候这里也可以拉出来，对不对？他这些点，大家看到的这些打叉叉的这些点都是可以拉出来的。这个我们不需要把它删掉， 那么可以用来改为显示一。 那我们可以从这样子，比如说从程序开始显示零，显示一显示零，显示一显示二。好，我们一路显示下来，我们一直做。 假如说我们就不做这么多，只作为演示用。那么在这里中间让他控制，一直显示到 九，那我们假设中间虚线对吧？ 这个地方曲线两到一，字写四到九。哎，到这里结束了。 那么到这里结束了以后，他会怎么样呢？因为我们是把所有的这些代码块，所有的这里的代码块呢，全部放在弧线循环里面，这个弧线循环就是他直接到这里以后呢，他又会回到 刚开始的地方，重新开始执行。那我们的得胜图应该是怎么样的？那么应该从这里出来，对不对？然后呢，再回去， 再回到这里。 好。这个有点歪歪气气的，不太好，我们把它调整一下， 调回来。好。这样就很明显了，大家可以看到了，从这里是大显示零一，一直到九，然后结束了，然后又回过头来，重新开始。 那么这个就是我们的这个上节课的这个程序的流程图。大概简单就是这样子。

ctrl 加 c ctrl 加 v 复制贴上。我试看看，是老师提示说把这一个 ctrl c 然后这样改吗？ ctrl 加 c ctrl 加 vc 跟 v 不是复制跟贴上吗？ 老师是要改形状哎， 方形改成菱形，不是复制贴上还是老师你有，你是用复制贴上把它换掉的吗？ 又说这一颗好了， ctrl c， 我要换成圆形，然后您是用 ctrl c 啊，老师教我哈哈哈。哎，好，不好意思。好，等下我们研究一下吧，如果研究出来跟各位说明 ctrl c ctrl v 可以进来后，然后去让他贴上的时候改图像吗？因为这是 ctrl c， 这是 ctrl v 哦，不是吗？对不对？有好，我想说好好哦，找到新的也可以加我。哈哈好嘞，不是看错，是看错，必要记得哈。他这是图像，那就是重做了。好，这边是重做。 ok， 好，我们再继续往下喽，好，不好意思哦好嘞，所以这是画图的方法，那你现在所画出来这个图像他其实目前都还是透明的，首先要看下面有那个格线的，他是透明的，你可以选这种是呃，让他变成不透明的就可以点他。所以如果你想要让他跟简报到时候 在一起的时候背景要有颜色，你就记得要改哦，要不然的话你的背景呢部分的颜色他会是透空的，这个他就会是透空的。 ok， 好，再注意一下。好，来，那我们再继续往下哈，老师把刚才的这个图打开一下，我可以知道位置调整好，我们看下面这里虚通报这边 假设说区通报这里之后呢，我们可要进到校安的那个系统里面。好，那呃登录 登录效案系统假设好好，当他登录这个系统之后老师都乱讲的，因为我真的不知道好，他也可能有呃，三条路要走，比如说他这边有三条路要走好，那怎么三条路走？我可以点这里箭头点一下矩形 第一颗，他肯定要选，选路吧啊？选路假，假设说的第一条路好，那我们就再点就我们先不要管对错哦，先讲哦， 我要第二条路的，我们再多第二颗，碰到他选再多一颗，那那镜头等会再来改点好，碰到他 点加一颗好箭头。线段不是这样画的哦，老师希望他可以这样子画过来。来，那这边我要特别的讲哦，在画流程图，我以前教流程图的时候啊，满场遇到一种情况，就是老师你们在画图的时候呢？你们会让你的图像 在绘制的时候线没有发漏者所谓流程的概念。也就是说，假设老师这个地方要画线好，那例如说线要这样子， 镜头是这样这样，然后是这样下来，看到吗？我要画这条线，然后我在教那个流程图的时候，我发现，哎，真的有人是 这样画线的，就是他这边先画一条泡泡里面画，然后这边再画一条，然后再给他箭头好，这是我们图像中我直接把他画成图像的方法，这是错的哦， 有尘土，他必须要照着正式的流程的线来走，所以你不能这样画，这错的哦，你要怎么画？你正式的画法要先从这边画一条， 这样画一条，这样画一条，也就是说这三颗的端点都要从这里出来， 你不能自己去画那一个线，听懂吗？如果你是用我这种画法的话，假设你是用这种画法，我记得我看过功课，他们在画那种流程电路板什么的，他这个画法是如果过来的话，这里有，他会这样，有看过吗？就是线跟线 如果有交叠的时候有这种这个图案啊，有些会有这个图案那。呃，以这个例子来看，他不是这样画的，不是他画的方式必须要从端点从这个端点延伸出发，延伸出发，延伸出发下来的，所以你记得先要从这按住托， 好按住拖，但是按住的时候他就跑掉了。就记得技巧是同样一个端点，如果要画多条线的时候，同一个端点要画多条线，一定要画完一条后空白处点一下再画第二条， 你再点他的时候，因为你空白处点一下就没有选取东西了，你再继续画的时候，他才会是从这一条线延伸出来的。这件事有听得懂吗？好，记得哦。他的画法要这样画，不是从这个端点按住拖过来到这个端点 不是这样画的，知道吧？这是假的，假线，他不是真的线，你要从原本的端点拉下来以及空白处点一下，原本的端点拉下来，这才是真正的流程。然后这个线当然我们就可以去调整， 这线可以调整，这是没有问题，但记得画的方式必须要是端点对端点的，而且是走流向型的，就他正确的流向的画法，而不是我们自己想象，我们要先要怎么画就怎么画，这很重要哦。好，拜托你们要记得就是不能够画。 还有老师找到更新的也，我们试看看，老师说把新的形状拖进去，哈哈，来新的形状拖进去，我们看一下。好，新的形状拖进来到上面去，然后出现了 一个蓝色的按钮，按下去后就可以了。是这一颗吧 是这一颗吧。 ok， ok， 太好了，老师你教我们一个新功能的。好，这就是教学，乡长超赞的。呃， 不是按下去拖延就好了不是按下去哦，来，再看一次动作好不好，但老师讲的是对的哦老师讲的是对的。好做法是刚才那一颗箭头。来，我再来一次哦，这是原本的。 好，如果我要换图像的时候。好，您这样拖出来哦。按，拖出来的时候到他身上有没有看到一个蓝色的图？是 蓝色图。是，就是劝举交换。那你就是是外婆了。过来后哦，你要你不要点，因为你一放开就没有我刚就是放开就没有。你要过来碰到那个图像再一次碰到图像放，这样就好了。再一次哦，按 拖，拖到图上哦，放，搞定。哎，没有成功按拖 啊，出来的呗。哇，再往后听到哈，出来就来不及了哈。好，再来呢，按拖 放，这样就好了，有没有听到？ ok， 谢谢谢谢谢谢，超赞的超赞的，超好用的。好，现在我们可以换图了。那那个电脑中有装逼说的，等下下课先移掉喽。好，可以移掉了。 那跟电商中心讲不用再买了哈，这个软体贵死了，不要再买了。好，现在要免费的。好，哎，你们练习一下。好吧，老师们这边然后特别注意线画法很重要，我刚有解释，线画法这个以后会影响到蛮多地方的， 像一些功能性呈现的时候要注意，然后这个线画法等下我们会讲对齐方式。好，我们大家看一下这一段来你们先练习看看 显示这边可以放大跟缩小啊，这边可以调一下下。 好，然后呢？呃，有一个快捷键，就是我会这样用，除了我看这个地方条之外，我这边放大缩小，例如我缩小了，我要移动的时候怎么移动画布？记得用空白键 长按住空白键长按住空白键移动可以吗？画布可以调整，然后这个画布目前是 a 四的尺寸这里，所以如果你想要大一点或小一点的时候你可以自己调尺寸。我说小一点哦，空白键移动可以拖，移动就一起选好一起往上放， 这样我们就给画布可以来做参考。好，放大呢？加号加号放大好，空白键按住移动。 ok， 画布移动就用空白键就对了。来试看看这 一堆。好是看看这里怎么画，我要再到下面再我把它换回来哦。好，拖进去就好了，记得。 好，这段练习一下下。 对，他，他老师他跟英雄很超像啊对不对？通化物件很好用哈。对，所以我才说他真的是现 相反的 visu 了，他超像超像的，重点他是免费线条文字很难操作吗？ 呃，对对，没错，因为刚才那个宽两下有没有我第一次用，我跟你讲是我这个功夫也长蛮久，我们前面突突突突突半天他不太理我。对，老师刚有分享，就是放大一点， 放大一点之后你就线段看得清楚了，在线段上按就会非常好按的，没有错，对吧？它其实就蛮蛮小的，就看不太大，有点可惜。好，然后就可以把它缩小，很好用哦。