一个强大的作图工具Mermaid入门

一个,强大,作图,工具,mermaid,入门 · 浏览次数 : 1248

小编点评

**Mermaid 入门指南** **网站:** mermaid.live/edit **在线编辑器:** mermaid.js.org/intro/ **官方使用方法在typora中选择:** ```mermaid ``` **学习更多语法资源:** * DEMOFlowChartgraph TD; * A-->B; * A-->C; * B-->D; * C-->D; * sequenceDiagramsequenceDiagram **入门示例:** ```mermaid Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! ``` **其他资源:** *ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dmd中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram to mermaidexcludes weekdays 2014-01-10section A sectionCompleted task :done

正文

一个强大的作图工具Mermaid入门

参考网站:

https://mermaid.live/edit 在线编辑器

https://mermaid.js.org/intro/ 官网

使用方法

  • 在typora中选择```mermaid即可，复杂的功能需要收费版可以显示
  • 类似于plantuml这种
  • 功能貌似强大一点
  • 有些未实现的(实验性质的)或者你没有收费的typora的，那你可以用在线作图或者直接用Mermaid-js(npm或者其他工具安装即可)
  • 如果要学更多的语法，请移步官网

DEMO

FlowChart

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

sequenceDiagram

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! 
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!
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!

Gantt Diagram

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
  • md中如果显示不出来，可能是你的typora没升级到1.XX版本，收费的能显示
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

Class Diagram

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
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 graph

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
  • 这里也显示不出来，应该是博客园本身集成的mermaid版本略低(好像是8.xx版本)

ER Diagram

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

User Journey Diagram

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
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

Pie Diagram

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15

Mindmaps

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
  • 同样显示不出来

Basic FR

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D
graph LR A["[]矩形"]-->|"-->箭头"|B("（）圆角") B---|"---连线"|C(("双(())圆形")) C==>|==粗线|D{"{}菱形"} C-->E>">]为非对称"]

Timeline

  • 当前用的收费版本都未实现
  • 实验性质的图例，关注下(反而是我比较喜欢的一个功能)
  • 你要使用该功能，可以去https://mermaid.live/edit，在线编辑
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
  • 一样显示不出来

一个 强大 作图 工具 mermaid 入门

与一个强大的作图工具Mermaid入门相似的内容：

一个强大的作图工具Mermaid入门

一个强大的作图工具Mermaid入门 参考网站: https://mermaid.live/edit 在线编辑器 https://mermaid.js.org/intro/ 官网 使用方法 在typora中选择```mermaid即可，复杂的功能需要收费版可以显示 类似于plantuml这种 功能貌

一个 强大 作图 工具
1248
[转帖]ping、arp、tracert、route这四大命令的详细用法，用途很广

https://zhuanlan.zhihu.com/p/460719455 在网络中ping是一个十分强大的TCP/IP工具。它的作用主要为： 1、用来检测网络的连通情况和分析网络速度 2、根据域名得到服务器IP 3、根据ping返回的TTL值来判断对方所使用的操作系统及数据包经过路由器数量。 我

ping arp tracert route
0
#PowerBI 1分钟学会，利用format函数，自定义格式显示

PowerBI是一款强大的数据分析和可视化工具，它可以帮助我们快速地创建各种报表和仪表盘，展示数据的洞察和价值。 在PowerBI中，有许多内置的函数可以帮助我们处理和转换数据，其中一个常用的函数就是Format函数。 Format函数的作用是将一个值按照指定的格式进行显示，例如日期、时间、货币、百

powerbi 分钟 学会 利用
866
python flask 简单应用开发

转载请注明出处： Flask 是一个基于 Python 的微型 Web 框架，它提供了一组简洁而强大的工具和库，用于构建 Web 应用程序。Flask 的主要作用是帮助开发者快速搭建轻量级的、灵活的 Web 应用。 使用 Flask 可以按照以下步骤进行： 1.安装 Flask： 通过 pip 工具

python flask 简单 应用
244
介绍ChatGPT：基于GPT-3.5的强大自然语言处理工具

ChatGPT是一个基于GPT-3.5架构的自然语言处理工具，它具有文本生成、文本分类、对话生成等多种能力。作为一种强大的自然语言处理工具，ChatGPT可以应用于智能客服、智能问答、内容创作等多个领域。如果您对ChatGPT感兴趣，可以通过关注本公众号了解更多信息，并体验基于ChatGPT的小程序提供的智能聊天和问答服务。

介绍 chatgpt 基于 gpt
1924
详解Python 中可视化数据分析工作流程

本文分享自华为云社区《Python 可视化数据分析从数据获取到洞见发现的全面指南》，作者：柠檬味拥抱。 在数据科学和分析的领域中，可视化是一种强大的工具，能够帮助我们理解数据、发现模式，并得出洞见。Python 提供了丰富的库和工具，使得可视化数据分析工作流程变得高效而灵活。本文将介绍 Python

python
0
简化 Go 开发：使用强大的工具提高生产力

作为 Go 开发人员，应该都知道维持简洁高效开发工作流程的重要性。为了提高工作效率和代码质量，简化开发流程并自动执行重复性任务至关重要。在本文中，我们将探讨一些强大的工具和技术，它们将简化 Go 开发过程，助力您的编码之旅。 Cookiecutter：使用一致的模板快速启动项目 问题描述 从头开始创

简化 go 开发 使用
16
如何使用Python和Plotly绘制3D图形

本文分享自华为云社区《Plotly绘制3D图形》 ，作者：柠檬味拥抱。 在数据可视化领域，三维图形是一种强大的工具，可以展示数据之间的复杂关系和结构。Python语言拥有丰富的数据可视化库，其中Plotly是一款流行的工具，提供了绘制高质量三维图形的功能。本文将介绍如何使用Python和Plotly

python plotly 3d
0
Visual Studio 智能代码插件：CodeGeeX

前言 在软件开发领域，高效的编程助手一直是提升开发者效率和质量的关键。随着人工智能技术的不断发展，智能编程助手逐渐成为开发者们不可或缺的工具。其中，CodeGeeX作为一款专为Visual Studio设计的免费智能编程助手，凭借其强大的功能和便捷的使用体验，赢得了广大开发者的青睐。 CodeGee

visual studio codegeex
0
介绍五个很实用的IDEA使用技巧

日常开发中，相信广大 Java 开发者都使用过 IntelliJ IDEA 作为开发工具，IntelliJ IDEA 是一款优秀的 Java 集成开发环境，它提供了许多强大的功能和快捷键，可以帮助开发者提高编码效率和质量。除了一些常见的技巧，如自动导包、智能补全、重构工具等。IntelliJ IDE

很实用 技巧 IDEA 使用
43
# 热门排行
微软 New Bing AI 申请与使用保姆级教程（免魔法） ChatGPT API使用介绍 ChatGPT开发实战 一篇带你了解如何使用纯前端类Excel表格构建现金流量表 手把手教你玩转 Excel 数据透视表 为什么 C# 可能是最好的第一编程语言 .NET 入门到高级路线 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件 React + Springboot + Quartz，从0实现Excel报表自动化 用Echarts实现前端表格引用从属关系可视化
© PmDaddy. 2023 PmDaddy教程网 All rights reserved.