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

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

示例代码

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];
}