小熊科技|程序员你是怎么绘制架构图？( 二 ) 作为一个程序员

Component组件元素如下：
元素名称函数组件Component组件数据库ComponentDb

@startuml !include ../C4_Component.pumlLAYOUT_WITH_LEGEND()title 网银系统组件图 - API应用Container(spa, "单页应用", "javascript 和 angular", "通过浏览器提供所有的网银系统功能给到用户.")Container(ma, "手机应用", "Xamarin", "通过手机设备提供有限的网银系统功能给用户.")ContainerDb(db, "数据库", "关系数据库 Schema", "存储用户的注册信息, 随机认证令牌, 访问日志等.")System_Ext(mbs, "Mainframe银行系统", "存储用户，账号，交易等所有的核心银行信息.")Container_Boundary(api, "API 应用") {Component(sign, "登录控制器", "MVC Rest 控制器", "允许用户登录到网银系统")Component(accounts, "账户汇总控制器", "MVC Rest 控制器", "提供用户汇总的银行账号")Component(security, "安全组件", "Spring Bean", "提供登录，修改密码等相关功能")Component(mbsfacade, "Mainframe 银行系统 Facade", "Spring Bean", "一个mainframe 银行系统 facade.")Rel(sign, security, "使用")Rel(accounts, mbsfacade, "使用")Rel(security, db, "读写", "JDBC")Rel(mbsfacade, mbs, "使用", "XML/HTTPS")}Rel(spa, sign, "使用", "JSON/HTTPS")Rel(spa, accounts, "使用", "JSON/HTTPS")Rel(ma, sign, "使用", "JSON/HTTPS")Rel(ma, accounts, "使用", "JSON/HTTPS")@endumlCode代码即通用的，元素如下：
元素名称函数虚框Boundry从上到下关系Rel反向关系Rel_Back从上到下关系Rel_U从下到上关系Rel_D从左到右关系Rel_L从右到左关系Rel_R代码级别可使用PlantUML绘制时序图，流程图，类图描述具体接口或者功能的实现细节；
这块是PlantUML的基础知识了，不详细展开，自行查阅资料即可。

@startumlactor 用户 as userparticipant 浏览器 as browserparticipant 前端 as frontparticipant 登录服务 as loginServerdatabase 数据库 as dbuser -> browser: 打开登录页面browser->front:加载资源,输入账号密码front->loginServer:ajax请求loginServer->db:按照账号查询，校验密码return: 返回结果@endumlC4PlantUML它是两个东西的合体，提供了一种简单的方法来描述和沟通软件架构。
plantuml被创造用来允许你绘制UML图，使用简单和人类容易阅读的文本描述，因为它没有阻止你绘制反常的图，它只是一个绘图工具而不是一个建模工具；他是使用最多的文本绘图工具，被wiki,论坛，文本编辑器和IDE强烈支持，可以使用不同的编程语言或者文档来生成；
C4模型对软件架构来说是一个抽象第一的绘图方式。基于抽象，可以反映出软件架构师和开发者是如何思考和构建软件的。少量的抽象和绘图类型是的C4模型很容易学习和使用；C4代表着context,containers,components ， code;这一系列水平层级的图，你可以使用它来从不同的尺度向不同的听众描述你的软件架构。
C4模型和plantUML 分工如下：
技术点用途plantUML写简单的代码即可绘图c4模型一种对系统架构的抽象的方法论C4PlantUML定义一种C4模型的绘图风格，使用PlantUML进行文本绘图使用方式：下载C4PlantUML 选择你熟悉的IDE集成即可使用；
IDE使用方式vscode安装 PlantUML 和 PlantUML Preview 插件 , Jdk , graphvizvscode引入.vscode/C4.code-snippets.idea下载plantUML插件，安装好 graphviz打开C4PlantUML文件即可命名规则：