19.Grafana之drawio绘图工具的使用(第十九篇)原创

大家好。在前面的几节视频中，我们讲到了follow家庭。的这个插件的使用。嗯，由于phototing这个插件它是功能比较多啊，效果也结合就IO这个绘图工具啊，做出来的效果也是比较好的，比阴麦的it至少要比阴麦的it要灵活很多啊。然后这一节的话，我主要是想讲一下JOIO这个工具如何用来绘图。啊，因为我们如果要想展示一个比较好的一个动态效果的话，其实有一幅漂亮的拓扑图也是很关键。好。啊，比如说我们想绘制一幅这样的拓扑图啊，在这个上面我们用就是说状态，绿色这个表示正常状态，然后嗯，橙色是warning，红色是，就比如说设备上面它的颜色状态发生变化了以后，它的状就是说状态发相当于状态发生变化啊，就是来一个告警。

嗯。然后。我们是把把绘制好的拓扑图放到。啊，放到这个古方里面啊，用follow来做一个这样的效果，比如说啊，因为我这里也是嗯。虚拟主机，我的虚拟主机只有只有六台啊，只能开六台机器只能开六，开六台就跑不动了，所以我这上面就模拟了几台这种服务器还有设备啊。现在是这种正常状态，比如说。我模拟一个，嗯，比如说A镜的故障，手机故障，比如说。有时候把A技能停掉。啊，我们我们一会儿再看一下，看一下它的状态，或者说我再停一个服务吧。

啊，比如说。我把MY这个。监控的这个MYSQL，其实他没监控是有问题的，我让他来就模拟触发这个告警，待会我们看一下，看一下图上的状态。然后等这边刷新，我们一会儿看一下。啊，就是做一个这样的动态效果啊，嗯，不过呢，呃，佛顶其实也有一个，我使用过程中也发现有个问题，就是说。啊。图上的元素很多的话，照样是浏览器加载还是刷新还是比较缓慢的啊。我手动刷新一下，看一下，待会儿啊。比如说monitor monitor01就是扎这台主机，它上面有服务有问题了，然后它就会状态变成这种色。

啊，它提示有一个问题啊。就提示提示有问题了，然后我刚才master这台主机也把它，待会他应该也会报出来，因为现在这边还没有。还没有，嗯，扎斯这边还没有检测到A点的故障了，它。然后它它也会提示出来。嗯。那我们先来看一下怎么样绘制一幅这样的一个图。拓扑图。嗯。绘图是最耗时间的。啊，我们来绘制一幅这样的这样的图好吧。我先把它拖到这边来，我们新建一个，我参照这个来做啊。嗯。屏幕不够。屏幕不够。

我放到这里吧，先把它最小化吧。嗯。比如说我们现在要添加这种主机啊，WEB010203，我们绘三绘制三台主机出来啊，我们在这里搜server啊，其实我们首先的话应该要看一下这个，就是说JOIO这个工具里面有哪些模，有哪些图。啊，元素有哪些元素，我们一个一个看一下，就是说大概过一下知道哪个哪里面有哪些元素啊。它分了很多啊，通用的basic的箭头啊，啊，这种这种卡片这种图啊。还有这种流流程图啊，啊软件里面的有活动目录啊，安卓啊什么什么的啊，这些iOS啊，什么STEM地图啊这些啊，还有一些像。嗯，AWS的这种，Network网络的这种啊，这里面有各种图。

嗯。然后除了这些图的话啊，Follow的话，其实我们复制一些图进来，就是说呃，觉得有一些图好的，或者说从其他的一些工具里面。像微手里面，我们在微手里面画图的话，也是可以导入到啊，这个JIO里面来的啊，他们是通用的啊，这些工具，嗯，这些图这些元素啊，我们先要了解啊。首先我们来说一下server。比如说我现在要一个服务器的图标啊。因为我这个我这个图标这里面是没有这个颜色是改了的啊这个颜色。它是基于我们来看一下，其实是是基于这个颜色，基于这个图标。啊，我们把它放大一点。啊，然后这个颜色因为太太难了，然后我就是说我设置了它的背景色啊，我设置啊，比如说它我们现在是要三台是不是，然后我们就复制三台，注意这上面的网格，我们排好位置啊。

就这三台。啊，这我们这样就画了三台出来。就拖了三台设备出来，然后我们在比如说一个交换机是吧，三层交换机，三层交换机的话，我们收Switch的话。Switch的话可能的图。啊。就是这个图，是不是我们把这个交换机稍微拉一下。啊，然后交换机有了是吧。然后就是会划线。比如说我们，我们来画这种线，我们把它。这太太太细了，我们可以把它画粗一点啊，比如我们首先把它放大一点啊，然后我们还要先给它打个框。

就是说。啊，不填充，然后。边框的话，我们先。我们先加个边框。啊，这个颜色，然后用虚线框。啊，就是先把它框到一个位置里面好知道。啊。比如，然后。是吧？然后比如说我们加一个文。蚊子2501。啊，我们放到这里来，放到上面来。卖。WEB02。外部三啊，比如说我们这样。我们看一下。啊，我们这里是这个图标是吧，这里下面是这种，下面是这种啊没事，我们我们把这里改到下面来。我们再说一下，这个是。

图标是可以用的啊，我们把这个。啊，它应该是这个图标啊。就是绘图的时候，我们保证这种元素啊啊占的比例是一样大。啊是这种它占了占了两格是吧，然后我们照样把它的背景色改一下，改成3V3啊。那我们待会这个就。啊，这个这个框先缩小一点。框是要基于下面，基于图的下面。我们把这三个就丢到下面吧。我们先拖到这边来。我去。然后我们把它框起来。框起来的话，我们把它把这个框置于。面back，至于下面就是或者你把这三个至于前面也可以啊，至于前一层它是分这个图都是一层一层的嘛，分个层的嘛，是吧，然后。

我们刚才在添加一个文字，这上面加个标题吧。加个标题，我标题的话我就不写，我直接从这边复制过来，写网络拓啊文字我就直接从这边复制过来啊。我们把它脱开。然后待会大小的话，我们自己再去调一下啊，这个图肯定是自己慢慢去修的啊，企业网络拓扑。我们把它放到这里。然后。接下来就是。我们把这个框框大一点，这里不是还有一个叫什么DMZ的是吧。DMZ的区域。我们把这个也复制过来啊，比如说。我们就把这个叫DMZ吧。

啊，然后。其实绘图就是这样的啊，复制粘贴复制粘贴啊。然后我们要稍微扩大一点点堆。这是。这一块外部零一相当于基本上就外部区DMC区域这一，这一块基本上就画出来了，然后我们现在画这个，呃，把交把它的线连起来啊。线的话，其实用你用一根一根的这样去连也可以。啊，它线的话不是有这种有这种线吗？是吧。我们把它擦掉，我们可以也可以用这种。嗯，我看一下高级。呃，用这种折线，用这种折线来连。我们就是相当于画画这种线吧，我们来看一下，再画一条水平线啊。

因为我们刚才把这里改成虚线，我们把它改成实线来看一下啊。我们来参，我们参照这个图吧，这个图它是三根线这样连下来的是吧，三根线连下来的话，如我们其实可以用一下这个。我们来看一下这个。我们把它改成。这个颜色色线。我们把它的颜色统一这六个零。然后出是二。然后这个不要了。那个。这个可调。是吧，我们其实我们是可以这样画的。

啊，然后，然后把交换机一层。是吧，然后再画一条出来就行了，那这样是有一个问题的，比如说。你要在线上面，在这根线上面增加一些元素，那就比如说流量，网卡流量，你这根线和这根线都是相当于是同一个元素。是不是你在photo里面的话，比如说啊讲到过，如果你要选中选，因为选中一个元素的话，它是一个。啊，这里已经这两个问题已经出现了，我把它我把它恢复一下，我把它报警。我先恢复。把这个先恢复起来。先把道理先恢复起来。我等他这边，这边已经恢复了。刚才把，那然后我们再来刷新一下这个。

嗯，这边也这边也恢复了，因为这个上面元素一多的话，它它自动刷新的话，有时候恢复成功啊。这也是有个问题。这也是看后面怎么优化了啊，我们接着这个图。所以我们我不推荐大家用这种啊，就一条线这样来连接，你可以我们可以用。用这种，我我我推荐是用这种线。嗯。这种折线连下来。或者说你用这种。嗯，我看一下。有这种弯钩的线。等一下。我看一下歼二里面有没有这种。这里面没有。

那我们就用这种线画吧。我们把它推上去。嗯，画三条线。嗯。然后。再画一条。然后这个就是至上一层，这个也是上一层状台是吧，这个也是状的，然后这个交换机的话也是是前。状态前一层。啊，我们把它推上去，然后我们接下来再再画一条这种线。这个线太粗了。我们把它改成两批的。我们把它说。是这样说的。我们把它慢慢一点移，我们把它放大。

啊，把它连接起来啊，这样虽然是两个元素，但是我们网卡比如说一进一出可以这样。啊，然后我们再在在这边。给它加一个元素。你们把它锁过去。然后再把它吃到前一层啊这一个。DMJ持相当于就已经啊，已经绘制出来了是不是，然后其他的也像三层啊，这个交换机，我们刚才这个文字没有加是吧，我们输入三层交换机。三三换三个交换机。比如说你也可以用他的名，就是说我们配置的那个名称。那些，嗯。这个字体我看一下字体的话，你可以调到16调大一点。

我们稍微调大一点。不然待会到那边图上面就比较小，我们把它字体都统一吧，都改到16。这个就是说字体大小也是要自己去调的，你到那边图上面，在里面图上面显示是怎样的，好不好看啊，你你要自己去调。然后这个这个框的话，颜色有点浅，我们框可以也可以把它稍微粗一点是吧，啊这种。啊，这样说。这表示一组嘛，是吧，一组元素我们把它稍微移一下。是吧，然后底下的话。嗯。往下拖。然后比如说防火墙是吧，防火墙我们刚才是从这种剪贴这种。

我们看有没有，或者说我们搜一下。在里面啊。防火墙里面有这种这种我们我们都可以拿拿出来用。啊，防火墙。我们再参照一下防火墙这里，这里有骨干路由器，我们把路由器丢出来。路由器。我们应该是root。路由器的话，你也可以用四颗的那个，我们可以加载看一下，它有很多，你喜欢用哪一种的话来表示的话都可以，你用这种也可以啊，因为我绘制的这种，比如说。是这种。非这种图标的时刻的这种图标的，所以我就用这种来表示了，这种交换机，这种路由器啊。然后比如说这边一个。然后后面就是连线就行了，我们先布局嘛，是吧，然后线连下来就行了。

啊。然后。接下来你看一下这边是什么，这边是Internet。Internet我们搜一下啊，Cloud那个是云嘛，是吧。云就是这种嘛，图片嘛，嗯，这个底色我们我们改成空白色就行了啊是吧，我们这种云白云嘛，是吧。我们用白云。啊，我们缩小，把它缩小，因为我们把。啊，白云。这边路由器的地方都有白云嘛，是吧，然后。语音出来了。这里面文字我们可以把它加进去，比如说我们复制一个，你在这边点TST也可以，在这里点TST可以。或者我们就把它放到这里，叫n Internet是吧，N Internet，然后这里放到Internet，呃，因为它是一起的，你可以把它组合成一个元素group啊，把它组合起来，比如说稍微调一下。

这个其实啊，很多都是和智能和微手是一致的啊，啊然后。是我看一下，然后就是这个客户端是吧？嗯，PCPC里面的话，我们也可以从这里面找一个出来是吧，这种。啊，这种PC是吧，你可以放到这边是吧。这个PC。啊，放到这边来，然后。还有啥？我们先把需要的元素都找出来，然后就是年限嘛，是不是，然后比如说。嗯，服这种back服务器啊，也是在刚才那里server，嗯，Server的话我用的是，我看一下用的哪个，其实也是调了一下颜色，就是这种。我们把它调到一样高度就行。比例吧。我们看一下能不能跟他重合。啊，吃饭能成合就差不多高了。

好吧，就比如说你把它丢到这边，这边备份的，我们先调一下颜色，比如说把它改成这种灰色。是吧，然后有时候丢到这边来。然后。这种元素度啊，这个找到了，然后就是会这个管，就是说我们一个交换机这样连起来好看一些，其实它不代表。也不代表什么啊意义吧，你如果说全部连到这个交换机上的话，线线比较多嘛，是吧，不不怎么好看嘛，相当于这是一根总线嘛，啊，然后这是一根总线，然后这种。主要是画画了，把这个元素如何找到对应的元，找到这些元素啊，然后来来绘制，我们基本上这个啊，这个已经找齐了，这种防火墙这种都。然后这根管道，这根管道的话，你就其实你就。你就拿一根这样的东西就行啊，一个椭圆一个圆柱，圆柱的话，我们我们把它的填充去掉。

啊啊，我们把它改成一啊，不要那么粗，然后我们去这样拉伸。是不是？类似于这种。或者。或者我们用用其他的。啊，这种这种管道我看一下这边啊，这边也是这个只是调了个方向吧，应该。掉了一个方向。就是说旋转了一下吧。啊，感觉。啊，可能就是这种。交了个方向而已。嗯。我们我们用两比的可能看起来效果好一点，粗一点好一点啊，只是一个拉伸的。嗯，然后。还有就讲到了啊，这种图啊，这种图可以从其他的，比如说网上啊或者什么的，你可以导进来。

粘进来。啊粘可以粘，粘到粘，你觉得哪些图好看，但是这些图呢，不能有那种白边。白边啊，有那种白边的话，可能你看有白，它这种图就白边很少，你如果说有很多白边的话。我看这上面什么叫有很多白边的话，你放到放到ground里面，如果是那种嗯，白底图的话，这里就有那种白色的边，就不太好看了。啊，所以你要找图的话，你要找专门的绘图工具里面的那些图，比如说我们其实我之前绘图的话，基本上是用那个意图啊，一个国产的一个绘图工具也比较好啊，你可以用那个工具来绘图。好。好，最终的话，最终的效果的话，可能就是嗯，你能绘制出来的，然后这些元素啊，啊，这边的元素的话，就是你自己也是相当于打一个框，然后比如说选一些点啊。啊，比如说选一些小圆点是吧，你说说到什么，你这里填充，比如说绿色。

是吧，你用绿色填充啊，然后边框边框也是绿色啊，比如说是这种啊，你就填充这样就行了啊，再复制一个对。指定大小的，然后比如说这个是橙色。啊，这个是橙色吧。嗯。啊，这种橙色最好颜色是啊，就是说填充色和它的边框色是一致，要保持一致。嗯。啊，然后把它把它排起来。啊，放放到一起，然后比如说把他的状态这样，我就不不从你们输了，我比如说这个是嗯，Normal。OL normal。正常是不是？

然后接下来啊。这种叫。Warning warning。Critical。这样的话。这样排好，你觉得如果这个圈太大了的话，我们可以细细的就适当的再调整一下，对齐一下。像这些元素啊，绘图的元素基本上找到了，那接下来的话就是一个年限啊，怎么样使它啊达到这种效果，因为我这个图确实也是调的，调了一上午就做成了这个效果。啊。这一节讲。