程序员你是怎么绘制架构图？

@startuml "enterprise"  !include ../C4_Context.puml  LAYOUT_TOP_DOWN LAYOUT_WITH_LEGEND()  Person(customer, "客户", "一种限制工具的客户")  Enterprise_Boundary(c0, "限制工具") {     Person(csa, "客户服务代理", "处理客户询问")      System(ecommerce, "电子商务系统", "允许客户通过widgets.com站点在线购买工具")      System(fulfilment, "履行系统", "负责处理和传递客户订单") }  System(taxamo, "Taxamo", "计算本地税务并扮演Braintree支付前台")  System(braintree, "Braintree支付", "处理信用卡支付购买工具")  System(post, "泽西邮报", "计算全世界的包裹邮费")  Rel_R(customer, csa, "咨询", "电话")  Rel_R(customer, ecommerce, "下工具订单")  Rel(csa, ecommerce, "查询订单信息")  Rel_R(ecommerce, fulfilment, "发送订单信息")  Rel_D(fulfilment, post, "获取物流费用")  Rel_D(ecommerce, taxamo, "代理信用卡处理")  Rel_L(taxamo, braintree, "使用信用卡")  Lay_D(customer, braintree)  @enduml 

@startuml  !include ../C4_Container.puml  LAYOUT_TOP_DOWN LAYOUT_WITH_LEGEND()  title 网银系统容器图  Person(customer, 客户, "银行客户有自己的私人银行账号")  System_Boundary(c1, "网银") {     Container(web_app, "Web 应用", "Java, Spring MVC", "传递静态内容和网银SPA")     Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能")     Container(mobile_app, "手机应用", "C#, Xamarin", "通过手机设备提供有限的网银功能")     ContainerDb(database, "数据库", "SQL 数据库", "存储用户的注册信息，随机认证密码，访问日志等")     Container(backend_api, "API应用", "Java, Docker容器", "通过API提供网银功能") }  System_Ext(email_system, "邮件系统", "网络软件交换系统") System_Ext(banking_system, "Mainframe银行系统", "存储所有的核心客户，账号，事务银行信息")  Rel(customer, web_app, "使用", "HTTPS") Rel(customer, spa, "使用", "HTTPS") Rel(customer, mobile_app, "使用")  Rel_Neighbor(web_app, spa, "传输") Rel(spa, backend_api, "使用", "异步, JSON/HTTPS") Rel(mobile_app, backend_api, "使用", "异步, JSON/HTTPS") Rel_Back_Neighbor(database, backend_api, "读写", "同步, JDBC")  Rel_Back(customer, email_system, "发送邮件到") Rel_Back(email_system, backend_api, "发送邮件", SMTP") Rel_Neighbor(backend_api, banking_system, "使用", "同步/异步, XML/HTTPS") @enduml 

@startuml  !include ../C4_Component.puml  LAYOUT_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") @enduml 

@startuml  actor 用户 as user  participant 浏览器 as browser participant 前端 as front participant 登录服务 as loginServer database 数据库 as db  user -> browser: 打开登录页面 browser->front:加载资源,输入账号密码 front->loginServer:ajax请求 loginServer->db:按照账号查询，校验密码  return: 返回结果   @enduml