Mermaid官方简介（DeepSeek生成式）

最新推荐文章于 2025-03-09 00:30:23 发布

查老师并不渣

最新推荐文章于 2025-03-09 00:30:23 发布

阅读量4.2k

点赞数 20

分类专栏： DeepSeek知识专栏文章标签： deepseek 人工智能 deepseek教程大模型 AI

本文链接：https://blog.csdn.net/chajinglong/article/details/145756376

版权

DeepSeek知识专栏专栏收录该内容

15 篇文章

订阅专栏

🌊 ‌让复杂逻辑跃然"码"上——Mermaid 2025全新进化登场！‌

你是否厌倦了在拖拽式图表工具中反复调整线条、对齐框线、导出失真？
✨ ‌一行代码生成专业图表，纯文本秒变可视化神器‌——这就是全球300万开发者选择的Mermaid！

▌‌为什么选择Mermaid？‌
✅ 用写代码的方式画图：流程图/时序图/类图等15+图表类型，Markdown式语法5分钟上手
✅ 无缝嵌入文档体系：Git版本可控、跨平台渲染、实时协作编辑
✅ 2025全新AI辅助模式：智能语法补全 + 交互式预览，开发文档效率提升70%！

‌# DevOps必备武器‌，让技术沟通像代码一样简洁精准——从原型设计到系统架构，从此告别"截图混乱纪元"！ 🚀

如果你要是想学习DeepSeek从入门到精通的，本地化部署+投喂ai+私有化知识库，不妨看看下面的视频

【DeepSeek教程】DeepSeek从入门到精通，一小时掌握，零基础本地部署+投喂数据+个人知识库搭建与使用（附全套文档及使用指南）_哔哩哔哩_bilibili【DeepSeek教程】DeepSeek从入门到精通，一小时掌握，零基础本地部署+投喂数据+个人知识库搭建与使用（附全套文档及使用指南）共计10条视频，包括：DeepSeek是什么？、DeepSeek基础-通用技巧、DeepSeek基础-拓展场景等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1nMNeePEZd/?vd_source=27c8ea1c143ecfe9f586177e5e7027cf

🌊 ‌让复杂逻辑跃然"码"上——Mermaid 2025全新进化登场！‌

Mermaid是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表，允许使用文本和代码创建图表和可视化。

官方文档：About Mermaid | Mermaid

中文版：关于 Mermaid | Mermaid 中文网

使用方法

对于大多数用户来说，使用在线编辑器就足够了，但是你也可以选择将 mermaid 部署为依赖或使用 Mermaid API。

在线编辑器

Mermaid的在线编辑器是其主要特色之一，如Online FlowChart & Diagrams Editor - Mermaid Live Editor。用户可以直接在网页上创建和渲染图表，无需安装任何软件。这对于大多数用途来说是一个快速且简便的选择。

关于 Mermaid

Mermaid 允许你使用文本和代码创建图表和可视化。

它是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。

如果你熟悉 Markdown，那么学习 Mermaid 的语法应该没有问题。

Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用 Markdown 启发的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发的步伐。

¥Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

Doc-Rot 是 Mermaid 帮助解决的第 22 条军规。

¥Doc-Rot is a Catch-22 that Mermaid helps to solve.

图表和文档会耗费开发者宝贵的时间，并且很快就会过时。但是，没有图表或文档会破坏生产力并损害组织学习。
Mermaid 通过使用户能够创建易于修改的图表来解决这个问题，它也可以成为生产脚本（和其他代码片段）的一部分。

Mermaid 甚至可以让非程序员通过 Mermaid 在线编辑器轻松创建详细图和图表。
教程有视频教程。

图表类型

流程图

代码:

mermaid

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

时序图

代码:

mermaid

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特图

代码:

mermaid

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

类图

代码:

mermaid

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Git 图

代码:

mermaid

gitGraphhttps://mermaid.nodejs.cn/intro/#git-graphsyntaxgitgraphmd
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit

Ctrl + 回车键|运行 ▶

实体关系图 - ❗实验

代码:

mermaid

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

用户旅程图

代码:

mermaid

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

象限图

代码:

mermaid

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

XY 图

代码:

mermaid

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

安装

深入的指南和示例可以在 入门和用法 中找到。

了解有关 Mermaid 语法 的更多信息也会有所帮助。

CDN

https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/

选择版本：

将 <version> 替换为所需的版本号。

部署 Mermaid

部署 Mermaid：

你需要安装 Node v16，它会有 npm
安装 Mermaid

- NPM：npm i mermaid
- Yarn：yarn add mermaid
- Pnpm:pnpm add mermaid

Mermaid API：

要在没有打包程序的情况下部署 mermaid，请使用以下示例将带有绝对地址的 script 标记和 mermaid.initialize 调用插入到 HTML 中：

html

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

这样做会命令 mermaid 解析器查找带有 class="mermaid" 的 <div> 或 <pre> 标签。mermaid 尝试从这些标签中读取图表定义并将其渲染为 SVG 图表。

例子可以在其他例子中找到

如果觉得对你有帮助，再此感谢，那不妨给up点个免费的小心心吧！！！