一个强大的作图工具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
前端开发-- Webpack 代码分割和懒加载技术

在现代前端开发中，优化应用性能是一个至关重要的任务。Webpack 作为一个强大的打包工具，为我们提供了代码分割和懒加载的功能，可以显著提升应用的加载速度和用户体验。本文将深入解析 Webpack 的代码分割和懒加载技术，帮助开发者更好地理解和应用这些技术。 什么是代码分割？ 代码分割（Code S

webpack
23
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接口自动化测试数据提取分析神器！

1、引言 在处理JSON数据时，我们常常需要提取、筛选或者变换数据。手动编写这些操作的代码不仅繁琐，而且容易出错。Python作为一个功能强大的编程语言，拥有丰富的库和工具来处理这些数据。今天，将介绍一个实用的Python库——JMESPath，它为提取JSON数据提供了简洁而强大的语法。 2、JM

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