mermaid流程图写作文档.md

概念

Mermaid 是一个强大的、基于文本的图表绘制工具，它允许用户通过简单的文本描述来生成复杂的图表。这种方式使得图表的创建和维护变得更加容易和高效，尤其是在需要将图表版本控制或与文档集成时。Mermaid 减少了使用传统图形编辑工具的需要，使非设计师也能快速绘制出看起来专业的图表。

主要特点

• 易于学习和使用： Mermaid 的语法简单直观，用户可以通过学习几个基本的语法规则来快速开始绘图。
• 文本到图形： 通过编写和解析文本描述，Mermaid 自动生成图表。这使得图表易于在版本控制系统中管理，并可以像代码一样被审查。
• 广泛的图表类型支持： Mermaid 支持多种图表类型，包括流程图、序列图、类图、状态图、甘特图以及实体关系图等，几乎涵盖了所有文档和报告中常见的图表需求。
• 集成方便： 它可以被集成到多种平台和工具中，例如 Markdown 编辑器、Confluence、GitHub、GitLab 等，很多支持 Markdown 的平台已经内置了对 Mermaid 的支持。

基本语法

Mermaid 的语法主要由图表声明（定义图表的类型和方向）、节点定义（定义图表中的元素）和连接符（定义节点之间的关系）组成。下面是一个简单的流程图示例的 Mermaid 代码：

graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do Something]
    B -->|No| D[Do Something Else]
    C --> D[End]

graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do Something]
    B -->|No| D[Do Something Else]
    C --> D[End]

这段代码描述了一个包含开始节点、决策节点和操作节点的简单流程，并指定了它们之间的关系。

使用场景

Mermaid 非常适合软件开发、项目管理、系统设计和文档编写等领域，特别是在需要快速创建和更新图表以说明复杂过程和系统的场合。

怎么开始

要开始使用 Mermaid，可以：

• 使用支持 Mermaid 的 Markdown 编辑器或平台。
• 安装 Mermaid CLI（命令行接口）工具，以在本地环境中生成图表。
• 在线使用 Mermaid Live Editor，这是一个官方提供的在线工具，允许用户即时预览他们的 Mermaid 图表代码生成的图形。

Mermaid 的学习曲线相对平缓，通过阅读其官方文档和在 Mermaid Live Editor 上进行实践，用户可以快速掌握如何绘制基础甚至是复杂的图表。

mermaid 常用写作工具

• typora
• mermaid在线
• https://mermaid.nodejs.cn/syntax/block.html

mermaid 常用工具库代码风格参考

---
title: mermaid 常用工具库代码风格参考
---
graph TB
	a[A]
	b[B]
	c[C]
	subgraph MySubGraphTitle
		comp_a:::Orange
		comp_a ---> comp_b[B]
		comp_b ----> comp_c
		comp_c ---> comp_d
		comp_d -- D转E --> comp_e
	end
	
	subgraph Layer1
		l_a
	end
	
	subgraph Layer2
		test_no_border:::NoBorder
	end


    linkStyle 1 stroke:blue,stroke-width:1px,color:black,stroke-dasharray: 5, 5;
    linkStyle 3 stroke:red,stroke-width:4px,color:green;

	%% stroke 为边框或线条 stroke: , stroke-width: 宽度 stroke-dasharray: 虚线
	%% fill 为填充结点的颜色
	%% color 为结点中文字颜色
	
	%% fill: 

    style a stroke:#f66,stroke-width:2px;
    style b stroke:#66f,stroke-width:4px;

	style Layer1 fill:#FFEBB5
	classDef Orange fill:#f96

	%% 颜色 transparent 透明
	classDef NoBorder fill:transparent, stroke:transparent;
	
	%% 样式测试区
	%%classDef Orange fill:#f96

---
title: mermaid 常用工具库代码风格参考
---
graph TB
	a[A]
	b[B]
	c[C]
	subgraph MySubGraphTitle
		comp_a:::Orange
		comp_a ---> comp_b[B]
		comp_b ----> comp_c
		comp_c ---> comp_d
		comp_d -- D转E --> comp_e
	end
	
	subgraph Layer1
		l_a
	end
	
	subgraph Layer2
		test_no_border:::NoBorder
	end


    linkStyle 1 stroke:blue,stroke-width:1px,color:black,stroke-dasharray: 5, 5;
    linkStyle 3 stroke:red,stroke-width:4px,color:green;

	%% stroke 为边框或线条 stroke: , stroke-width: 宽度 stroke-dasharray: 虚线
	%% fill 为填充结点的颜色
	%% color 为结点中文字颜色
	
	%% fill: 

    style a stroke:#f66,stroke-width:2px;
    style b stroke:#66f,stroke-width:4px;

	style Layer1 fill:#FFEBB5
	classDef Orange fill:#f96

	%% 颜色 transparent 透明
	classDef NoBorder fill:transparent, stroke:transparent;
	
	%% 样式测试区
	%%classDef Orange fill:#f96

常用颜色方案

• 基础色：

  提供足够对比度，适用于大多数背景和用途。

  • 蓝色：#1E90FF（道奇蓝），给人以专业和可靠的感觉。
  • 绿色：#32CD32（酸橙绿），代表增长和繁荣。
  • 红色：#FF6347（番茄），用于警告或强调。
  • 黄色：#FFD700（金色），用来吸引注意或表示警告，但比红色更温和。
  • 灰色：#708090（石板灰），适合背景和非主要元素，提供足够对比而不过于抢眼。

辅助色方案

辅助色可用于强调、分类或作为基础色的补充：

• 浅蓝色：#87CEFA（浅天蓝色），温和且易于观看，适合作为背景或强调信息。
• 紫色：#9370DB（中紫色），神秘且优雅，适合创意展示。
• 橙色：#FFA07A（浅橙色），活泼且友好，适合吸引注意。
• 粉色：#FFC0CB（粉红），温柔且亲切，用于温和强调。