Quartz 4

🔍 搜索

MarkDown

5 min read

MarkDown语法

一、 https://osdoc.net/md/11/ 一个很不错的MarkDown文档

二、https://blog.51cto.com/u_12855930/5708631 这个整理的也不错，很详尽

缩进符号

  
   这个是缩进符号

显示为 缩进

这个是缩进符号

缩进加无序标题

  - 这个是缩进加无序标题
  • 这个是缩进加无序标题

在Markdown生成 流程图方法

方案一：Mermaid (最佳选择)

Mermaid 是一个基于 JavaScript 的图表库，它能将类似 Markdown 的文本描述解析成各种图表。因为它语法简单直观，并且被大量平台原生支持，所以是首选。

为什么它高效？

  • 纯文本：你可以像写代码一样写流程图，方便版本控制（如 Git）。
  • 易于修改：修改一个节点或一条线，只需改一行文本，无需拖拽对齐。
  • 专注于逻辑：你只需关心流程的节点和关系，Mermaid 负责排版和美化。
  • 广泛支持：GitHub, GitLab, Gitee, Notion, Obsidian, Typora, VS Code 插件等都支持它。
graph TD;
    A[开始] --> B(处理请求);
    B --> C{检查条件?};
    C -->|条件为真| D[执行操作A];
    C -->|条件为假| E[执行操作B];
    D --> F(结束);
    E --> F;

Mermaid 核心语法快速入门

1. 定义图表类型和方向

  • graph TD 或 graph TB - 从上到下 (Top Down / Top to Bottom)
  • graph LR - 从左到右 (Left to Right)
  • graph RL - 从右到左 (Right to Left)
  • graph BT - 从下到上 (Bottom to Top)

2. 定义节点 (Node)

节点的语法是 ID[显示文本]。ID 是节点的唯一标识符，显示文本 是图上看到的文字。

  • 矩形节点 (默认): A[这是一个矩形]
  • 圆角矩形节点: B(这是一个圆角矩形)
  • 圆形节点: C((这是一个圆形))
  • 菱形节点 (条件判断): D{这是一个菱形?}
  • 子程序形节点: E[[这是一个子程序]]
  • 不对称矩形: F>这是一个不对称矩形]

3. 定义连接 (Link)

使用箭头连接节点的ID。

  • 带箭头实线: A --> B
  • 不带箭头实线: A --- B
  • 带箭头虚线: A -.-> B
  • 带箭头粗线: A ==> B

4. 为连接添加文本

在连接符中间用 | 包裹文本。

  • A -->|连接文本| B
  • C ---|我也是文本| D

实战演练：一个用户登录流程

让我们用上面的知识画一个稍微复杂点的流程图。

graph TD
    A[用户打开登录页] --> B{输入用户名和密码};
    B --> C[点击登录按钮];
    C --> D{后端验证};
    D -- 验证成功 --> E[跳转到主页];
    D -- 验证失败 --> F[提示错误信息];
    F --> B;
    E --> G((结束));

方案二：PlantUML (更强大，稍复杂)

PlantUML 是另一个非常强大的工具，支持的图表类型比 Mermaid 更多（如时序图、类图、状态图等），语法也更严谨。

如何使用 PlantUML

它的代码块通常是 plantuml。

@startuml
start
:接收请求;
if (参数是否合法?) then (是)
  :处理业务逻辑;
  :返回成功结果;
else (否)
  :返回错误信息;
endif
stop
@enduml

效果 (渲染后): 会生成一个标准的流程图。很多 IDE（如 IntelliJ IDEA, VS Code）的插件都支持 PlantUML。

对比 Mermaid:

  • 优点: 功能更强大，支持的图表类型非常丰富。
  • 缺点: 语法相对啰嗦一点，在通用 Markdown 平台（如GitHub）上的原生支持不如 Mermaid 广泛。

设置文字背景颜色

设置文字背景颜色

横向插入多张图片

语法如下

<p align="center">
  <img src="图片地址1" width="32%" />
  <img src="图片地址2" width="32%" />
  <img src="图片地址3" width="32%" />
</p>

效果

Graph View