如何用语雀画板,轻松画出架构图?

简介: 无须任何第三方工具,用语雀画板,轻松画出架构图。

原文首发于 语雀的天空


作为一个程序员,相信你对架构图一定不会陌生。分享、评审、述职、答辩,几乎都离不开。


有些人可能一听到画架构图就会起来喊:“内卷啦”、“PPT工程师”。但程序本身就是一种数学逻辑的具体实现,如果没有一些图配合文字阐述,很难让项目中的所有成员都快速理解并且在同一维度交流。

一张 清晰、美观的架构图 有助于提升团队的 沟通效率交流共识实施速度交付质量

虽然知道画架构图有这么多好处 ,但当我们真正着手画图时,是不是又遇到了以下的问题:


  1. 对着画布无从下手、删了又来?
  2. 如何用一张图描述复杂的系统,并让产品、运营、开发都能看明白?
  3. 图上的框框有点少是不是要找点儿框框加进来?
  4. 布局怎么画都不满意……

如果有同样的困惑,本文将会教大家如何用 语雀画板 轻松画出架构图。


 架构图三步画法


第一步:分层


你可以先使用画板基础图形中的圆角矩形,将业务按照层级划分成几个大区。每个独立的板块都可以使用一种颜色去区分。



每个层级需要有逻辑上的关联,比如下层为上层服务,或者提供能力支撑。通常情况下,下层更抽象、上层更具体。

第二步:分模块


在同一个层级中,同类型的业务可以聚合到一个模块中,相对重要的模块可以用不同的颜色标记出来。



每个模块之间都相对独立,模块之间也会存在相互依赖关系、关联关系。

第三步:填功能


在分好的层级和模块中填充一些具有代表性的应用或功能。

简单三步就可以画出一个清晰美观的业务架构图。

当然在动手画图之前,必须非常清楚自己画架构图的目的,并且对业务有相对全面的思考。然后就可以将所有涉及到的应用、功能、系统、能力、平台全部罗列出来,进行提炼归纳分类,最后按照分层、模块、功能的维度将具体的内容补充进去。

再给大家介绍几条关于语雀画板使用的小技巧👇

 使用小技巧


➊ 拖拽图形控制点调整样式,让功能和模块有所区分。(用同色系的组合会更加美观)

➋ 将画好的模块合成一个「组」可快速复用,再用对齐工具将他们排列整齐。

➌ 把功能模块与对应的语雀文档关联在一起,通过一张图串联更多业务信息。让架构图不再是一张大图,通过链接赋予它更多可能性。

更多关于语雀画板的使用技巧,等待大家去探索。目前 模板中心 还有现成的架构图模板,大家可以直接使用,更加高效。




 最后


以上只是教了大家一些画图技巧,想画出一个好的架构图, 首先还是要明确受众,再想清楚要给他们传递什么信息。在绘制过程中,也不要忘了画图的初衷是解决沟通障碍、达成共识、减少歧义,不要为了“炫技”而画。

画图的过程也正是不断自我提升思考能力,加深对于技术和业务理解的过程。收集、提炼、抽象各类信息到绘制过程中的权衡取舍,可以帮助我们逐步对业务全局、行业深度、技术视野、技术深度、业务共性、个性特征等等形成自己的认知。

除了架构图外,语雀画板还支持 UML图流程图思维导图原型图等。你再也不需要学习和下载多个不同的软件了,语雀画板简单易用,还能在同个画布上绘制各种不同类型的图,帮你用图自由地表达各种信息。

相关文章
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
118 0
|
1月前
|
JavaScript 数据可视化 图形学
iCraft Editor - 助你轻松绘制出色的立体架构图
iCraft Editor是一款创新工具,专为绘制立体架构图设计,带来直观且吸引人的3D视觉体验。它简化了复杂系统的表达,支持自由旋转与缩放,让用户从多角度审视设计。简洁界面与丰富图形库让操作变得简单快捷,即使是新手也能迅速上手。iCraft Editor支持子场景嵌套及外部模型导入,适用于软件架构设计、系统部署维护等多种场景,提升沟通效率。无需编程基础,即可在线免费使用,轻松实现复杂设计的可视化。开启3D新视角,让您的创意无限延伸![官网](https://icraft.gantcloud.com)
71 1
iCraft Editor - 助你轻松绘制出色的立体架构图
|
1月前
|
域名解析 存储 资源调度
Excalidraw——部署一个手绘风格的画图工具
Excalidraw——部署一个手绘风格的画图工具
46 3
|
4月前
|
Java 测试技术 项目管理
产品入门第三讲:Axure产品流程图绘制
产品入门第三讲:Axure产品流程图绘制
127 0
产品入门第三讲:Axure产品流程图绘制
|
API
Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图
Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图
176 0
|
运维 架构师 安全
如何画好一张架构图?(3)
如何画好一张架构图?
23954 5
如何画好一张架构图?(3)
|
自然语言处理 搜索推荐 测试技术
如何画好一张架构图?(2)
如何画好一张架构图?
734 0
|
测试技术 定位技术 uml
如何画好一张架构图?(1)
如何画好一张架构图?
813 0
|
存储 开发工具
微信小游戏开发实战3-绘制网格
本篇主要内容包括使用微信小游戏开发工具动态的绘制一个网格,并通过使用变量来控制最终生成的网格的效果。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
98 0
|
存储 程序员 uml
【程序员必备】绘制架构图,流程图神器推荐
好的图形可以帮我们更好的表达自己,帮我们理清逻辑