代码编织梦想

Mermaid简介

Mermaid 允许使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表绘制和图表工具,可呈现受 Markdown 启发的文本定义,以动态创建和修改图表。

Mermaid使用方法

1、流程图(graph)

graph TD;
	A-->B;
	A-->C;
	B-->D;
A
B
C
D
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
Link text
Square Rect
Circle
Round Rect
Rhombus
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
A
Two line
edge comment
Rounded
square
shape
Odd shape
Diamond with
line break
Rounded square shape
Square shape
Circle shape
Inner / circle
and some odd
special characters
Really long text with linebreak
in an Odd shape
,.?!+-*ز
Cyrillic
Circle shape Начало

2、时序图(sequenceDiagram)

sequenceDiagram
	Alcie->>Johb:hello John, how are you?
	John-->>Alice:Great!
Alcie Johb John Alice hello John, how are you? Great! Alcie Johb John Alice

3、状态图(stateDiagram)

stateDiagram
	[*]-->s1
	s1-->[*]
s1

4、类图

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
Cool
Where am i?
«Interface»
Class01
int chimp
int gorilla
size()
AveryLongClass
Class09
C2
C3
Class07
Object[] elementData
equals()
«service»
Class10
int id
size()

5、甘特图(gantt)

gantt
    section Section
    Completed :done,    des1, 2022-01-06,2022-01-08
    Active        :active,  des2, 2022-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
Thu 06 12:00 Fri 07 12:00 Sat 08 12:00 Jan 09 12:00 Mon 10 Completed Active Parallel 1 Parallel 2 Parallel 3 Parallel 4 Section

6、饼图(pie)

pie
	title Key elements in Product X
	"Dogs" : 25
	"Cats" : 25
	"Rats" : 15
	"Iron" : 35
25% 25% 15% 35% Key elements in Product X Dogs Cats Rats Iron

7、需求图

flowchat
  st=>start: Start
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  e=>end
  st->op->cond
  cond(yes)->e
  cond(no)->op
Created with Raphaël 2.3.0 Start Your Operation Yes or No? End yes no

参考连接

🔴[Theming (mermaid-js.github.io)

🟡 https://github.com/mermaid-js/mermaid

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45392321/article/details/127157968

python-seaborn画图-(matploytlib)更高级的数据绘图工具_herr_kun的博客-爱代码爱编程_python seaborn matplot

转载:https://blog.csdn.net/suzyu12345/article/details/69029106 python seaborn画图 以前觉得用markdown写图文混排的文字应该很麻烦,后来发现C

Markdown学习总结笔记(最全的总结)-爱代码爱编程

20200410 Markdown学习笔记——Typora 前言 今天是2020年的4月10日,下午15.53. 受新冠疫情的影响, 今年在家度过了一个令人难以忘记的假期. 但伴随的还有低下的学习效率. 在学习时总会觉得学下去就更需要学. 这篇文档可以说是下一个文档《Latex学习笔记》的铺垫,因为在我看来,在掌握Latex之前学会使用Markdwo

# 记笔记最好用的工具Typora、Markdown 语法常用-爱代码爱编程

记笔记最好用的工具Typora、Markdown 语法常用 Markdown 标题 Markdown语法语法意义# 一级标题一级标题## 二级标题二级标题### 三级标题三级标题#### 四级标题四级标题##### 五级标题五级标题###### 六级标题六级标题展示效果如下:Markdown 段落 要创建段落,请使用空白行将一行或多行文本进行分隔。M

visual画图软件_历史最全科技互联网类免费书籍、音乐、照片、软件、招聘信息整理汇总分享...-爱代码爱编程

    本资源由科技爱好者周刊整理,收集了130多本与科技互联网相关的免费书籍资源,涉及Web 开发、系统管理、编程语言、数据库、软件开发、人工智能、理论书籍等方面。还包括音乐、图片、软件、招聘信息等方面资源。     原始链接:https://github.com/ruanyf/weekly 科技爱好者周刊 记录每周值得分享的科

matplotlib学习笔记(一)-爱代码爱编程

matplotlib学习笔记一 基础操作保存刻度练习1:设置中文显示、设置轴步长和描述练习2:绘制网格练习3:多线,图例小结导图     PYthon中的matplotlib将简单地为论文实验中需要的loss图和其他实验结果图提供可视化和分析工具。因此,本文目的为简单地学会读取数据、画图、简单美化实验图。以提供案例为核心内容。主要参考黑马程序员的

Typora使用教程-爱代码爱编程

(1)标题 ctrl 1到ctrl 6:一级~~**六级**标题 Ctrl+0 消除所有标题 (2)字体 加粗 ctrl +B:加粗 倾斜加粗 ctrl +I: 倾斜 删除线 Alt+Shift+5:删除线 下划线 Ctrl+U: 下划线 倾斜加粗删除 高亮 我是上标 我是下标 < sup> 文本 将实现上标 <

CSDN创作中心Markdown编辑器基本使用方法-爱代码爱编程

  首先,这篇文章原出处是CSDN中创作中心自带的教程,但因为只能在创作中心看,并不方便日常的使用参考,故在原教程基础上加上部分自己的使用心得,可以更直观的显示各语法的效果,记录各类语法的使用。   当然,部分效果的语法仅是我自己在尝试,可能有更好的方法。   在文章开头使用了缩进。&emsp;&emsp;一个&emsp;代表一个

文档工具笔记-画图-爱代码爱编程

树状图 #mermaid-svg-Iae2VTj9CehhW9BI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Iae2VTj9CehhW9BI .error-icon{fill:#552222;}#mermai

如何在 flowus、notion笔记软件使用白板和代码绘制流程图(二)_emiya spike的博客-爱代码爱编程

如何在白板工具和代码绘制流程图? 关于如何在 FlowUs 这样的效率工具中如何使用流程图的话题,上次我们在文章中推荐了 ProcessOn 和 Draw.io 这两款工具。具体可以阅读原文。 除了专门的流程图工具,还有其他解决方案吗? 使用白板工具绘制流程图或者思维导图。 使用代码绘制流程图 白板工具:Miro 介绍 一款备受好评、在线

typora的下载及markdown使用_花花王的博客-爱代码爱编程

一、Typora下载 1. Typora下载网址: Typora是一款非常使用的笔记工具,MarkDown是一个标记性语言,需要编辑器支持(typora)对于程序员非常友好,在2021年11月23日,Typora 正式发布 1.0 版本,进入了付费时代。最后一个免费版本是 0.11.18 下载方式一 typora1.0版本 https://wwn

你是如何使用react高阶组件的?_beifeng11996的博客-爱代码爱编程

High Order Component(包装组件,后面简称HOC),是React开发中提高组件复用性的高级技巧。HOC并不是React的API,他是根据React的特性形成的一种开发模式。 HOC具体上就是一个接受组件作

带你一步步分析webpack是如何执行打包产物的_young soul2的博客-爱代码爱编程

引入关系如图所示: 圈出来文件d是异步导入的文件。 wepback版本如图所示: 执行打包命令,产物如下图: 会生成两个js文件,一个是入口文件打包的testxx.js,还有一个是异步文件d生成的src_d_js.js