[工具|绘图] markdown的绘图工具Graphviz示例

本是古典何须时尚 2024-03-17 21:36 63阅读 0赞

Graphviz: Graphviz 是一个开源的图形可视化工具，它使用 DOT 语言描述图形结构和属性，并将其转换为图形形式。你可以在 Markdown 中使用 Graphviz 的语法来创建有向图、无向图、流程图等。  
[dot语言官方地址][dot]  
示例代码

digraph BusinessModelCanvas {
 rankdir=RL;
 edge[style=invis];
 node [shape=rectangle];
 
 subgraph cluster_label{
 rank=same;
 subgraph cluster_top{
 enterpriseCustomer[label=<
 企业客户
 >];
 educationCustomer[label=<
 教育机构
 >];
 governmentCustomer[label=<
 政府机构
 >];
 
 subgraph cluster_customerSegments {
 label="客户细分"
 style=filled;
 color="#e5fbf0";
 enterpriseCustomer;
 educationCustomer;
 governmentCustomer;
 }
 
 regularUpdates[label=<
 定期更新和升级
 >];
 customerFeedback[label=<
 客户反馈和需求收集
 >];
 longTermPartnership[label=<
 长期合作伙伴关系
 >];
 subgraph cluster_customerRelationships{
 label="客户关系";
 style=filled;
 color="#48A0F7";
 regularUpdates;
 customerFeedback;
 longTermPartnership;
 }
 enterpriseCustomer -> regularUpdates[weight=20];
 
 indirectSales[label=<
 间接销售
 >];
 partnerCoSelling[label=<
 合作伙伴联合销售
 >];
 subgraph cluster_Channels{
 label="渠道通路";
 style=filled;
 color="#44df92";
 indirectSales;
 partnerCoSelling;
 }
 governmentCustomer -> partnerCoSelling[weight=0];
 
 applicationOnboarding[label=<
 简化应用接入和管理
 >];
 applicationEntryPoint[label=<
 提供统一的应用入口
 >];
 subgraph cluster_ValueProposition{
 label="价值主张";
 style=filled;
 color="#ffa899";
 applicationOnboarding;
 applicationEntryPoint;
 }
 regularUpdates -> applicationOnboarding;
 partnerCoSelling -> applicationEntryPoint;
 
 launcher[label=<
 启动台
 >];
 applicationManagement[label=<
 应用管理
 >];
 subgraph cluster_KeyActivities{
 label="关键业务";
 style=filled;
 color="#ccdeff";
 launcher;
 applicationManagement;
 }
 applicationOnboarding -> launcher;
 
 iam[label=<
 管理系统
 >];
 subgraph cluster_KeyResources{
 label="核心资源";
 style=filled;
 color="#99bdff";
 iam;
 }
 applicationEntryPoint -> iam;
 
 iamServer[label=<
 身份验证服务提供商(IAM)
 >];
 developer[label=<
 应用开发商(IAM)
 >];
 subgraph cluster_KeyPartnership{
 label="重要合作";
 style=filled;
 color="#55e0a6";
 iamServer;
 developer;
 }
 launcher -> iamServer;
 iam -> developer;
 }
 
 subgraph cluster_bottom{
 indirectIncome[label=<
 间接收入
 >];
 subgraph cluster_RevenueStreams{
 label="收益来源";
 style=filled;
 color="#55e0a6";
 indirectIncome;
 }
 
 researchCosts[label=<
 研发和技术支持成本
 >];
 collaborationCosts[label=<
 合作伙伴关系成本
 >];
 managementCosts[label=<
 管理和行政成本
 >];
 subgraph cluster_CostStructure{
 label="成本结构";
 style=filled;
 color="#e0ccff";
 rank=same;
 researchCosts;
 collaborationCosts;
 managementCosts;
 }
 indirectIncome -> managementCosts;
 managementCosts-> collaborationCosts;
 collaborationCosts ->researchCosts;
 }
 }
 }

业务流程图示例（使用泳道图）

digraph BusinessProcessDiagram {
 edge[style=invis];
 rankdir=RL;
 node[shape=box];
 
 start[label=<
 开始
 >,shape=ellipse];
 authEnd[label=<
 结束
 >,shape=ellipse];
 orgAdminEnd[label=<
 结束
 >,shape=ellipse];
 orgMemEnd[label=<
 结束
 >,shape=ellipse];
 
 subgraph cluster_InternalSystems {
 rank=same;
 style = rounded;
 
 
 isOrgAdmin[label=<
 是否管理组织
 >,shape=diamond, fillcolor=lightblue];
 sysSyncOrg[label=<
 同步组织信息
 >];
 sysSyncUser[label=<
 同步用户信息
 >];
 sysSyncApp[label=<
 同步应用信息
 >];
 
 subgraph cluster_SystemAdmin {
 label = "应用中心";
 style=rounded;
 color="#48A0F7";
 rank=min;
 labeljust=l;
 isOrgAdmin;
 sysSyncOrg;
 sysSyncUser;
 sysSyncApp;
 }
 
 addOrgApps[label=<
 添加组织应用
 >];
 
 pushApps[label=<
 发布应用
 >];
 
 subgraph cluster_OrgAdmin {
 label = "组织管理员";
 style=rounded;
 color="#48A0F7";
 rank=min;
 labeljust=l;
 addOrgApps;
 pushApps;
 }
 
 
 
 orgMemFindOrgApp[label=<
 查看应用列表
 >];
 startApps[label=<
 启动应用
 >];
 addOrgMemPerApp[label=<
 添加当前用户的个人应用
 >];
 subgraph cluster_OrgMember {
 label = "组织成员";
 rank=min;
 labeljust=l;
 style=rounded;
 color="#48A0F7";
 orgMemFindOrgApp;
 startApps;
 addOrgMemPerApp;
 }
 }
 
 authentication[label=<
 身份验证
 >];
 isVerified[label=<
 是否认证通过
 >,shape=diamond];
 orgInfo[label=<
 组织信息
 >];
 userInfo[label=<
 用户信息
 >];
 appInfo[label=<
 应用信息
 >];
 
 subgraph cluster_ExternalSystem {
 label = "管理系统";
 rank=min;
 style=filled;
 color=gray;
 authentication;
 isVerified;
 orgInfo;
 userInfo;
 appInfo;
 }
 
 sysSyncOrg -> orgInfo[style=bold];
 sysSyncUser -> userInfo[style=bold];
 sysSyncApp -> appInfo[style=bold];
 
 start -> authentication[style=bold,constraint=false];
 authentication -> isVerified[style=bold,constraint=false];
 isVerified -> authEnd[label="NO",style=bold];
 isVerified -> isOrgAdmin[label="YES",style=bold];
 isOrgAdmin -> addOrgApps[label="YES",style=bold];
 addOrgApps -> pushApps[style=bold,constraint=false];
 pushApps -> orgAdminEnd[style=bold];
 isOrgAdmin -> addOrgMemPerApp[label="NO",style=bold];
 isOrgAdmin -> orgMemFindOrgApp[label="NO",style=bold];
 orgMemFindOrgApp -> startApps[style=bold,constraint=false];
 addOrgMemPerApp -> orgMemEnd[style=bold,constraint=false];
 startApps -> orgMemEnd[style=bold];
 }

[dot]: https://graphviz.org/doc/info/lang.html