Markdown画图

简介: Markdown画图

对于程序员来说,Markdown是最常用的语言了,但是一直以来markdown都没有提供思维导图的功能,需要使用思维导图软件编辑以后以图片的形式插入到markdown文档中,难以实现一站式的编辑体验。

现在Markdown也可以支持思维导图啦,依赖于使用Mermaid代码块来实现。

Mermaid支持各种图形:

  • 流程图
  • 序列化
  • 甘特图
  • 类图
  • Git图
  • 用户旅程图
  • ......

以类图为例,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

展示出来的图形如下:

以序列图为例,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代码块如下:

graph LR
A[Spring]-->B[Spring Boot]
A-->C[Spring Cloud]
A-->D[Spring Data]
B-->E[Spring Boot 1.x]
B-->F[Spring Boot 2.x]
C-->H[Spring Cloud Netflix]
C-->I[Spring Cloud Alibaba]
D-->J[Spring Data Redis]
D-->K[Spring Data MQ]

相关文章
|
3月前
|
资源调度
Markdown 数学公式
Markdown 数学公式
28 0
|
3月前
|
uml
markdown之mermaid
markdown之mermaid
|
12月前
markdown画流程图
markdown画流程图
55 0
markdown编写数学公式
在计算机这一块,我们肯定会接触到数学,数学中又包含很多公式,但是到现在,手写这些公式应该不陌生,但是如果让你电脑敲出来,你绝对很懵逼,这也造成了我们有时候写笔记时一些公式没办法在电脑上像我们手写一样灵活,今天在这里分享给大家使用markdown描述公式的语法
350 1
markdown编写数学公式
使用Markdown编写数学公式的简易指南
Markdown是一种轻量级的标记语言,广泛用于撰写文档、博客和学术论文。在数学领域,有时需要插入数学公式以便更清晰地表达思想。本文将介绍如何在Markdown中轻松地编写数学公式,使你的文本更具可读性和专业性。
528 1
|
前端开发 JavaScript 算法
如何在页面展示数学公式之Latex语法
最近在做markdown 算法文章分享,算法肯定会涉及到数学复杂度,比如: O(log_nX) 等数学公式的展示,但是如果写成这样子lognX,估计很难准确表达,因此上网搜索了一下数学表达式在前端页面如何展示的相关技术。
237 0
|
机器学习/深度学习 资源调度
markdown 常用数学公式
markdown 常用数学公式
106 0
【Latex】Jupyter/Markdown/Latex快速编辑高大上数学公式/常见希腊字母
【Latex】Jupyter/Markdown/Latex快速编辑高大上数学公式/常见希腊字母
169 0
|
数据可视化 JavaScript 前端开发
【Mermaid】画图工具使用笔记
【Mermaid】画图工具使用笔记
212 0