高级架构图（C4 架构与时间线图）
在面对高并发企业级软件系统开发设计时，绘制清晰、严密的软件系统架构模型至关重要。Mermaid 支持行业领先的 C4 架构图（C4 Context）规范，同时也集成了按时间线进行重大项目里程碑展现的时间线图（Timeline）。
一、C4 架构图：系统上下文与容器级建模
C4 模型是一种分层式的系统架构描述方法。它允许我们使用极简的脚本绘制出系统上下文层（C4 Context）和容器层（C4 Container）视图：
C4Context
title "C4 架构系统上下文图 (Context Level)"
Person(user, "平台用户", "注册、编辑并同步文档。")
System(app, "Carbon Note 核心系统", "处理实时编辑和图表绘制。")
Rel(user, app, "网络浏览器访问", "HTTPS/WSS")
C4 架构核心节点定义与关系解析：
在这段代码中，C4Context 声明使用 C4 架构图引擎。Person(别名, 名称, 描述) 声明了系统的交互用户。System(别名, 系统名称, 详细作用描述) 声明了整个项目的主系统边界。最关键的连线交互由 Rel(源别名, 目标别名, 业务操作名称, 使用协议) 完成。这比普通流程图更能体现微服务系统中的人员关系、核心系统分界与通道协议。它是软件架构师设计复杂云原生平台的利器。
二、时间线图：重大项目里程碑编排
时间线图（Timeline）用于以极端直观的横向节点树展现历史大事件或长期研发周期的各阶段成果：
timeline
title Carbon Note 历史迭代时间线
2025 : 内核研发 : 支持标准 Markdown 语法
2026 : 图表起飞 : 引入 C4 架构与 XY 坐标图
: 云端同步 : 支持离线持久化机制
时间线图事件分节与分层结构解析：
时间线图以 timeline 声明。title 为主题。主干以年度（如 2025、2026）作为一级时空标签，后面通过冒号 : 接入具体的项目大事件阶段（如 内核研发），并再用冒号跟上对该事件的详细补充或完成指标。如果某一年（如 2026）有多个重大并发进展，可以在第二行直接通过前置冒号缩进排版（如 : 云端同步）进行多项分支陈列，非常适合写在企业产品成长历程、年度工作计划汇报和研发成果总结中。
三、常见问题与避坑指南（FAQ）
- 问题：C4 架构图里的
Rel连线报错提示别名未定义？- 解决方法：请严格检查您在
Rel、Rel_Back或Rel_Neighbor中所引用的源或目标别名（如user、app），必须在前面已经使用Person或System进行了显式声明。
- 解决方法：请严格检查您在
- 问题：时间线图
timeline文字太长，渲染出来的图表宽度爆表，严重挤占左右页边距？- 解决方法：时间线图主要针对精炼、关键的事件提炼而设计，切忌在事件说明中写入超过 20 字以上的长文本。如果有极详尽的内容，应当以常规 Markdown 文字写在图表的上下文中。
Advanced Architecture: C4 Context and Timeline Diagrams
When mapping enterprise-grade cloud software, standard flowcharts often fall short. Mermaid integrates industry-standard C4 Diagrams and longitudinal Timeline visualizers to communicate system contexts and roadmap schedules.
1. C4 Architecture Diagrams: Context and Component Modeling
The C4 model outlines layered software designs. We declare actors, systems, and communication boundaries instantly:
C4Context
title "C4 Context Level Diagram"
Person(user, "System User", "Creates, views, and syncs markdown notes.")
System(app, "Carbon Note Core platform", "Performs real-time render actions.")
Rel(user, app, "Uses web browser", "HTTPS / WSS")
C4 Context Syntax and System Definitions:
Initiated via C4Context, components are declared with explicit roles: Person represents human actors, while System maps software application units. Relationships are bounded using Rel(Source, Target, Message, Protocol), perfectly modeling API interfaces and enterprise cloud network channels.
2. Timeline Diagrams: Roadmap Chronology
Timeline diagrams illustrate company histories, release logs, or sprint schedules:
timeline
title Product Iteration Roadmap 2026
2025 : Core Engine Release : Supported base Markdown rendering
2026 : Diagram Extension : Integrated C4 and XY graphs
: Offline Persistence : Connected local IndexedDB schemas
Timeline Formatting and Node Structuring:
Declared via timeline, entries utilize colon : separations. You can append multiple tasks to a single temporal bucket (e.g. 2026) by using aligned indentations with leading colons, perfect for corporate product updates and release plans.
3. FAQ
- Why do my C4 relationship references
Relthrow exceptions in Mermaid?- Solution: Ensure that all unique aliases referenced inside
Rel(e.g.userorapp) have been fully declared beforehand usingPersonorSystemconstructor methods.
- Solution: Ensure that all unique aliases referenced inside
- My Timeline nodes are wrapping oddly on high-density displays?
- Solution: Limit chronological label text to high-level summaries (3-5 words per point). Detailed explanations should belong to adjacent paragraph text.