mermaid之subgraph的使用

原创 已于 2022-10-10 11:26:22 修改 · 4.6k 阅读 · 2
标签
#mermaid #markdown #流程图
于 2022-10-10 11:25:15 首次发布

https://raw.githubusercontent.com/ipfs/ipfs-docs/main/docs/concepts/ipns.md

mermaid之subgraph的使用

第一步：我们把组件画好

graph TB
    Record>"IPNS Record"]
    subgraph Routing
      Publisher
      Resolver
      Local[("Local store")]
      subgraph Transports
        PubSub[(PubSub)]
        DHT[(DHT)]
      end
    end
Routing
Transports
Publisher
Resolver
最低0.47元/天 解锁文章
手把手教你用Mermaid绘制复杂系统架构图（含Subgraph嵌套技巧）
weixin_29210759的博客
03-16 488
本文详细介绍了如何使用Mermaid绘制复杂系统架构图，特别是Subgraph的嵌套技巧。从基础语法到高级应用，包括环境搭建、逻辑分组、样式自定义、多层级嵌套和跨Subgraph连接优化，帮助开发者高效创建清晰、模块化的架构图，提升技术文档的可维护性和协作效率。
Mermaid 子图 + 拖拽缩放：让流程图支持无限细节展示
03-13 3869
在技术文档、项目管理和可视化分析中，流程图是传递复杂逻辑的核心工具。传统流程图往往静态且难以适应细节展示，而 Mermaid 与 svg-pan-zoom 的结合，则为这一痛点提供了完美解决方案。本文将深入解析如何通过 Mermaid 的子图（subgraph）实现模块化分类，结合 svg-pan-zoom 的缩放拖拽能力，构建可交互的流程图系统。Mermaid 是一款基于文本的图表生成工具，通过简单的语法即可创建流程图、时序图、类图等。其最大亮点在于功能，允许开发者将节点按逻辑分组，形成层次化结构。
mermaid之subgraph的进阶应用：构建复杂系统架构图
最新发布
weixin_42561040的博客
04-15 250
本文深入探讨了mermaid中subgraph的进阶应用，帮助开发者构建复杂系统架构图。通过嵌套subgraph和连线管理技巧，可以清晰展示微服务边界和分布式系统分层，提升架构图的可读性和维护效率。特别适合用于微服务架构、K8s集群和网络协议栈的可视化设计。
Mermaid画流程图、序列图、饼图、甘特图(实例讲解)
ixiaoyang的专栏
10-22 9578
本文将介绍如何学习使用Mermaid画图。传统的可视化绘图工具，每次使用都要以图片的形式进行编辑，不便于微调，在不同应用之间切换也比较麻烦。Mermaid语法简单，改动较小，绘图更高效，更适合程序员使用。下面使用实例展示一下流程图、序列图、饼图、甘特图的绘图过程。
Mermaid图表进阶：用subgraph轻松绘制复杂系统架构图（附IPFS示例）
weixin_29289821的博客
03-22 425
本文深入探讨了Mermaid图表工具中subgraph功能的应用，帮助开发者轻松绘制复杂系统架构图。通过详细的IPFS示例和实用技巧，展示了如何利用subgraph进行模块划分、交互关系表达和样式优化，提升技术文档的可读性和维护性。
02-Mermaid 高级功能
qq_44073614的博客
06-26 2914
fill:#333;color:#333;color:#333;fill:none;important;important;important;important;important;important;自定义样式节点普通节点graph TDA[自定义样式节点] --> B[普通节点]classDef customStyle fill:#f9f,stroke:#333,stroke-width:4px ← 定义样式类class A customStyle ← 应用样式到节点A💡。
mermaid绘制子图
健身房
06-10 5795
graph   mermaid可以使用graph绘制子图，代码如下： graph TB subgraph one a1 --> a2 end subgraph two b2 --> b2 end subgraph three c1 --> c2 end c1 --> a2 #mermaid-svg-g91BfhEin5NhM1zD .label{font-family:'t
深入解析mermaid中subgraph的嵌套与流程设计
weixin_28312391的博客
03-05 74
本文深入解析了Mermaid图表中subgraph的嵌套与流程设计技巧。通过基础分组、多层嵌套及高级交互设计，帮助用户清晰描绘复杂系统架构，如微服务与数据处理平台，从而提升技术文档与架构图的可读性与专业性。
Mermaid Subgraph避坑指南：如何避免在绘制流程图时常见的布局混乱问题
weixin_29248653的博客
03-19 444
本文深入探讨了Mermaid Subgraph在绘制流程图时的常见布局混乱问题，提供了避免过度嵌套、混合方向和尺寸失衡等误区的实用技巧。通过结构化设计原则和实战优化技巧，帮助开发者优雅地组织复杂流程，提升图表可读性。
VSCODE, mermaid subgraph 示例
xxxx的博客
01-18 889
本文展示了Mermaid语法中子图(subgraph)的多种应用方式，包括基础子图结构、嵌套子图实现、跨子图连接等。通过电商系统案例，演示了用户模块、商品模块和订单模块的层级关系与交互流程。同时介绍了Mermaid中使用%%符号添加单行注释的方法，以及流程图中的条件分支表示。这些示例展现了Mermaid在系统架构设计和业务流程可视化方面的灵活应用。
开发人员必备工具！mermaid的详细教学
zhangqinhang1的博客
10-16 1万+
Mermaid 是一个基于 JavaScript 的图表绘制库，它可以用于创建流程图、状态图、时序图以及甘特图等各种类型的图表。它以 HTML 形式渲染图表，而不是生成静态图片，这使得它更加灵活和安全。项目地址Mermaid 官方项目地址项目应用：Mermaid 用于在 web 环境中创建各种类型的图表。它可以用于文档、技术博客、项目文档等等，特别适合于与 Markdown 结合使用。Mermaid 可以帮助用户以直观的方式展示各种流程、状态、时序等信息，从而提高文档的可读性和可理解性。
mermaid大全（语法、流程图、时序图、甘特图、饼图、用户旅行图、类图）
热门推荐
Le0v1n 的博客
01-12 1万+
语法、流程图、时序图、甘特图、饼图、用户旅行图、类图
Mermaid说明
pumpkin84514的博客
09-12 1万+
在 Mermaid 中，注释使用%%符号添加。这些注释在生成的图形中不会显示，它们仅用于在 Mermaid 源代码中添加额外的说明或文档。可以根据具体的图类型在适当的位置添加注释，以提高代码的可读性和可维护性。
✨ [Mermaid 踩坑日常] 流程图节点突然“失联”？一文讲透 Subgraph（子图）连接的正确姿势！
小丁的博客
02-26 1113
摘要：Mermaid 流程图中的 subgraph 子图不会自动连接节点，必须手动声明所有连线。常见错误包括主流程跳过子图、子图内部节点孤立。解决方案是：1) 主流程用箭头指向子图入口节点；2) 子图内部显式连接每个节点；3) 所有分支终点都要指回主流程。记住口诀："进门认准第一步，出门记得带上门，内部兄弟手拉手"，即可画出结构清晰的流程图。
使用mermaid画流程图
李迟的专栏
02-11 1万+
本文介绍使用mermaid画流程图，并给出几个示例。
微知-mermaid中如何将某几条关系放入一个框中？作为子图？（subgraph AA开始，end结束）
技术札记
12-04 532
以subgraph [title] 关键字开始以end结束中间的关系都会被。
Mermaid图表进阶：用subgraph轻松绘制复杂系统架构图（附IPFS案例）
a3b4c5的博客
03-10 216
本文深入探讨了如何利用Mermaid图表中的subgraph功能，高效绘制复杂系统架构图。通过一个IPFS（星际文件系统）中IPNS模块的实战案例，详细展示了从组件分组、描绘交互流程到样式优化的完整步骤。subgraph作为逻辑容器，能显著提升架构图的可读性与可维护性，是技术文档编写和系统设计的强大工具。
Mermaid Subgraph实战：5分钟搞定IPFS节点关系可视化
weixin_30872157的博客
03-31 450
本文详细介绍了如何使用Mermaid的Subgraph功能快速可视化IPFS节点关系。通过嵌套子图和分层展示，有效解决传统绘图工具在表达复杂网络拓扑时的边界模糊、连线混乱等问题，并提供5个提升可读性的实用技巧，帮助开发者高效呈现分布式系统的架构设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值