【工具系列0】mermaid应用案例

已于 2024-04-07 10:44:47 修改
阅读量2.8k 收藏 12
点赞数 1
分类专栏： 常用工具 文章标签： 编辑器
于 2022-03-04 08:40:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kewaqi618/article/details/123268268
版权

mermaid应用案例

介绍

关于mermaid

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

它是一个基于 Javascript 的图表和图表工具，它呈现受 Markdown 启发的文本定义以动态创建和修改图表。

参考地址：https://mermaid-js.github.io/mermaid/#/

图标类型

流程图
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
A
B
C
D
序列图
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!
Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John
甘特图
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
2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to 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
Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3
Git图 --！实验
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

master, bc52c63

8909da9

02776c9

0e6953a

newbranch, b653fd5

1f494f3
实体关系图 --！ 实验
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses 
erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
CUSTOMER DELIVERY-ADDRESS ORDER INVOICE ORDER-ITEM PRODUCT-CATEGORY PRODUCT has places liable for receives covers includes contains ordered in
用户旅程图
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
Cat Me
Go to work
Go to work Me
Make tea
Make tea Me
Go upstairs
Go upstairs Me Cat
Do work
Do work
Go home
Go home Me
Go downstairs
Go downstairs Me
Sit down
Sit down My working day

图表语法

flowchart与graph所显示的图形基本相同，但前者在绘制曲线时更加圆润一些。

图形

一个节点（默认）
graph LR
	id
id
带文本的节点

也可以在不同于 id 的框中设置文本。如果多次这样做，它将是为将使用的节点找到的最后一个文本。此外，如果您稍后为节点定义边，则可以省略文本定义。渲染框时将使用先前定义的那个。

graph LR
	id1[这是框中的文字]
这是框中的文字
图形

该语句声明了流程图的方向。

这声明流程图从上到下（TD或TB）定向。

graph TD
	开始-->停止
开始
停止

这表明流程图是从左到右的（LR）。

graph LR
	开始-->停止
开始
停止

流程图方向

  • TB - 从上到下
  • TD - 自上而下/与自上而下相同
  • BT - 自下而上
  • RL - 从右到左
  • LR-从左到右

节点形状

具有圆边的节点
graph LR
	id1([这是框中的文字])
这是框中的文字
子程序形状中的节点
graph LR
	id1[[这是框中的文字]]
这是框中的文字
圆柱形节点
graph LR
	id1[(Database)]
Database
圆形节点
graph LR
	id1((这是圈中的文字))
这是圈中的文字
不对称形状的节点
graph LR
	id1>这是框中的文字]
这是框中的文字
一个节点（菱形）
graph LR
	id1{这是框中的文本}
这是框中的文本
六边形节点
graph LR
	id1{{这是框中文本}}
这是框中文本
平行四边形
graph LR
	id1[/这是框中文本/]
这是框中文本
反向平行四边形
graph LR
	id1[\这是框中文本\]
这是框中文本
梯形
graph LR
	id1[/这是框中文本\]
这是框中文本
倒梯形
graph LR
	id1[\这是框中文本/]
这是框中文本

节点之间的链接

节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。

带箭头的链接
graph LR
	A-->B
A
B
一个开放的链接
graph LR
	A --- B
A
B
链接上的文字
graph LR
	A-- 这是正文 ---B
这是正文
A
B

或者

graph LR
	A--- |这是正文|B
这是正文
A
B
带箭头和文本的链接
graph LR
	A -->|文本|B
文本
A
B

或者

graph LR
	A -- 文本 -->B
文本
A
B
虚线链接
graph LR;
	A -.-> B;
A
B
带文本的虚线链接
graph LR;
	A -.文本.-> B;
文本
A
B
粗线链接
graph LR;
	A ==> B;
A
B
带文本的粗线链接
graph LR;
	A ==文本==> B;
文本
A
B
链接的链接

可以在同一行中声明许多链接，如下所示

graph LR
	A --  text  --> B --  text2  --> C
text
text2
A
B
C

也可以在同一行中声明多个节点链接，如下所示

graph LR
	a --> b & c --> d
a
b
c
d

然后，您可以以非常有表现力的方式描述依赖关系。就像下面的单线：

graph TB
	A & B --> C & D
A
B
C
D

如果您使用基本语法描述相同的图表，则需要四行。警告一句，这可能会使流程图更难以降价形式阅读。瑞典词lagom浮现在脑海。这意味着，不要太多也不要太少。这也适用于表达性语法。

graph TB
	A --> C 
	A --> D 
	B --> C 
	B --> D
A
C
D
B
新的箭头类型
graph LR
	A --. B 
	B --x C
A
B
C
多向箭头
graph LR
    A o--o B
    B <--> C
    C x--x D
A
B
C
D
链接的最小长度

流程图中的每个节点最终被指定给渲染图中的一个等级，即基于其链接到的节点的垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的列组，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接长。

在下面的示例中，在从节点B到节点E的链接中添加了两个额外的破折号，以便它比常规链接跨越两个以上的列组：

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
Yes
No
Start
Is it?
OK
Rethink
End

注意：为了适应其他请求，渲染引擎可能会使链接的长度超过请求的列组数。

当链接标签写在链接的中间时，必须在链接的右侧添加额外的破折号。以下示例与前一个示例等效：

graph TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
Yes
No
Start
Is it?
OK
Rethink
End

对于点或粗链接，要添加的字符是等号或点，如下表所示：

Length123
Normal------------
Normal with arrow-->--->---->
Thick============
Thick with arrow==>===>====>
Dotted-.--..--...-
Dotted with arrow-.->-..->-...->
打破语法的特殊字符

为了呈现更麻烦的字符，可以将文本置于引号内。如下例所示：

graph LR
    id1["This is the (text) in the box"]
This is the (text) in the box
转义字符的实体代码

可以使用此处示例的语法转义字符。

graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
A double quote:"
A dec char:♥

给定的数字以10为基数，因此#可以编码为#35;。还支持使用HTML字符名。

子图
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
three
one
c2
c1
two
b2
b1
a2
a1

还可以为子图设置显式id。

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
one
a2
a1
c1
流程图

使用graphtype流程图，还可以设置与子图之间的边，如下面的流程图所示。

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
three
one
c2
c1
two
b2
b1
a2
a1
子图中的方向

使用graphtype流程图，可以使用direction语句设置子图将呈现的方向，如本例所示。

因为在Typora 不支持direction，所以这里的展示结果修改了这部分内容

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
TOP
B1
f1
i1
B2
f2
i2
A
B
相互作用
flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
    click C href "http://www.github.com" _blank
    click D href "http://www.github.com" "Open this in a new tab" _blank
A
B
C
D
E 
graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
text
text2
A
B
C

设置节点的样式

可以对节点应用特定样式，例如较厚的边框或不同的背景色。

flowchart LR
    id1(Start)-->id2(Stop)
    id3(Start)-->id4(Stop)
    id5(Start)-->id6(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:1px,height:50
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 3,width:100
    style id3 fill:#f6e,stroke:#103,stroke-width:3px
    style id4 fill:#5af,stroke:#f16,stroke-width:4px,color:#fff,stroke-dasharray: 6
    style id5 fill:#f3f,stroke:#933,stroke-width:5px
    style id6 fill:#b4f,stroke:#361,stroke-width:6px,color:#fff,stroke-dasharray: 9
Start
Stop
Start
Stop
Start
Stop
类
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;
A
B
CSS类
flowchart LR;
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
A
AAABBB
D
对图标字体的支持
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)
for peace
forbidden
A perhaps?
顶点和链接之间有空格且不带分号的图声明
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

时序图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
Alice John Hello John, how are you? Great! See you later! Alice John

语法

参与者
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
Alice Bob Hi Bob Hi Alice Alice Bob
Aliases

参与者可以有一个方便的标识符和一个描述性标签。

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
Alice John Hello John, how are you? Great! Alice John

箭头类型

目前支持六种类型的箭头：

TypeDescription
->Solid line without arrow
–>Dotted line without arrow
->>Solid line with arrowhead
–>>Dotted line with arrowhead
-xSolid line with a cross at the end
–xDotted line with a cross at the end.
-)Solid line with an open arrow at the end (async)
–)Dotted line with a open arrow at the end (async)

激活

可以激活和停用参与者。（反）激活可以是专用声明：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
Alice John Hello John, how are you? Great! Alice John

还有一种快捷方式，在消息箭头后添加+/-后缀：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
Alice John Hello John, how are you? Great! Alice John

可以为同一参与者叠加激活：

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!
Alice John Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I feel great! Alice John
大道随心
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wiki-mermaid
04-08
维基美人鱼 笔记 您必须有一个非空的output/目录... 例子 这是一个内联美人鱼文件 人鱼标记graph TD; A-->B; A-->C; B-->D; C-->D; W-->D; E-->S; S-->T;
mermaid.cli：开发已移至https：github.commermaid-jsmermaid-cli
02-23
开发已移至 美人鱼 命令行界面。 此CLI工具以美人鱼定义文件作为输入，并生成svg / png / pdf文件作为输出。 本地安装 某些人在全局安装此工具时。 在本地安装它是一种替代解决方案： yarn add mermaid.cli ./node_modules/.bin/mmdc -h 或使用NPM： npm install mermaid.cli ./node_modules/.bin/mmdc -h 全局安装 :red_exclamation_mark: 我们不建议在全局范围内安装它，因为由于奇怪的权限问题，YARN和NPM都可能无法在全局范围内正确安装命令行工具。 yarn global add mermaid.cli 或者 npm install -g mermaid.cli 例子 mmdc -i input.mmd -o output.svg mmdc -i input.mmd -o output.pn
Mermaid在线生成类图
最新发布
ezsxrtghjmk的博客
03-28 467
类图绘制工具~ 提升工作效率~
mermaid-live-editor:位置已移至https
04-12
开发已移至 美人鱼现场编辑 编辑，预览和共享美人鱼图表/图表。 特征 实时编辑和预览流程图，序列图，甘特图。 将结果另存为svg 获取指向该图查看器的链接，以便您可以与他人共享它。 获取一个链接以编辑该图，以便其他人可以对其进行调整并向其发送新的链接 设置 设置很简单。 yarn install 或者使用Docker运行HTTP服务器 docker build -t mermaidjs/mermaid-live-editor https://github.com/mermaidjs/mermaid-live-editor.git docker run -d -p 8000:8000 mermaidjs/mermaid-live-editor 并在访问它 发展 yarn dev open http://localhost:1234 这个应用是使用React + React Rout
react-md-editor：一个简单的带有预览的markdown编辑器，使用React.js和TypeScript实现
02-04
一个简单的带有预览的markdown编辑器，使用React.js和TypeScript实现。 这个React组件旨在为一个简单的Markdown编辑器提供语法高亮显示支持。 这是基于textarea封装的，因此它不依赖于任何现代代码编辑器，例如Acs，CodeMirror，Monaco等。 产品特点 :bookmark_tabs: 通过按Tab键缩进行或所选文本，以及可自定义的缩进。 :recycling_symbol: 基于textarea封装，不依赖于任何现代代码编辑器。 :construction: 不依赖于组件库。 :oncoming_automobile: 自动列出新行。 :smiling_cat_with_heart-eyes: GitHub风格的Markdown支持 快速开始 npm i @uiw/react-md-editor 使用 impor
mermaid-demo
10-30
mermaid是一款开源的画流程图、时序图、甘特度的工具，提供了命令行和html两种使用方法。本例是在html中使用mermaid画出各种图的例子。
mermaid-livereload:使用您最喜欢的文本编辑器创建 HTML 流程图，无需刷新浏览器
06-08
美人鱼-livereload 用于创建纯文本流程图的简单预制模板，由在浏览器中呈现。 打包为带有 Guard 和 guard-livereload 的 Sinatra 应用程序，因此每次保存对流程图的更改时，您的浏览器都会自动重新加载。 要求 Ruby 和 Bundler。 用法 bundle install bundle exec rackup .. 安装依赖项，并启动 Sinatra 应用程序。 让它继续运行，然后在另一个终端中： bundle exec guard start 您的流程图位于公用文件夹中。 尝试包含的流程图.html 开始： http://localhost:9292/flowchart.html 在文件保存时，您应该会在 Guard 控制台中看到一些反馈，让您知道刷新已发送到浏览器。 常问问题 为什么这必须有一个 Sinatra 应用程序？ LiveR
mermaid工具
热门推荐
赶路人儿
10-30 3万+
mermaid是一款开源的画流程图、甘特图、时序图工具，她提供了一种类似markdown的语法来创建各种图。 官网：https://mermaidjs.github.io/ 在线编辑器：here 1、入门 我们先试用mermaid提供的在线编辑器，来熟悉一下mermaid的各种画图语法； 1）流程图 2）时序图： sequenceDiagram A-&gt;&gt; B: Qu...
ChatGPT进阶——如何辅助设计E-R图、流程图和时序图等
SmartLab307的博客
03-29 1万+
Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
类Markdown实时绘图编辑器mermaid-live-editor
wbsu2004的博客
01-27 9655
Mermaid 能通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
程序员的画图工具-代码画图的美人鱼mermaid
心猿意码
10-30 2180
在画UML图的时候，总要花费很多时间去调整图像对齐， 各个图像直接的距离是否合适，等等。对于程序员来说，如果我们直接通过代码来画图，瞬间就亲切多了，画出来的图也会看起来更加的专业，整洁。一共有四种方式使用mermaid，我个人觉得第一种最方便，不需要安装任何客户端，直接在线编辑。Mermaid美人鱼就是一款可以实现通过代码画流程图，时序图，类图， 甘特图，饼图等等的软件。可以直接打开在线的网站mermaid.live. ， 里面有列子，也可以自己写代码画图。
mermaid-cli:美人鱼库的命令行工具
03-16
则可以使用该容器来生成SVG文件，如下所示： docker run -it -v /path/to/diagrams:/data minlag/mermaid-cli -i /data/diagram.mmd本地安装某些人在全球范围内安装此工具时。 在本地安装它是一种替代解决方案： ...
GitHub + Mermaid-crx插件
03-09
适用于Chrome，Opera和Firefox的浏览器扩展，向GitHub添加了人鱼语言支持。 使用有关GitHub问题，拉取请求或.md文件的代码块创建图： A-> B; A-> C; B-> D; C-> D;...支持语言:English
mermaid-webapp:使用 mermaid.js 的 web 应用程序
06-25
美人鱼-webapp 这是一个简单的角度 web 应用程序，允许在网络上创建图形和序列图使用和 感谢 Knut Sveidqvis ( ) 创建美人鱼项目！ 我还参考了将其与 angular 集成。 对于样式，使用了框架。
欢迎使用Markdown编辑器
weixin_52753312的博客
11-20 792
介绍欢迎使用Markdown编辑器
Mermaid使用简介
Bossen的学习历程
04-19 1万+
mermaid简介 以与markdown类似的方式从文本生成图表和流程图。 在解释代码时，是否想过简化文档并避免使用像Visio这样的重量级工具? 这就是美人鱼诞生的原因，这是一种简单的类似markdown的脚本语言，用于通过javascript从文本生成图表。点击 这里 试用mermaid在线编辑器。 下面先来看几个例子： 流程图（flowchart）： mermaid代码如下： grap...
Mermaid在线生成时序图
ezsxrtghjmk的博客
08-30 3403
参与者可以显式定义或者像上述例子一样隐式定义，显式定义语法如下participant 小李participant 小王小李->>小王: Hi 小王小王->>小李: 你好，小李//participant 是参与者的关键字，关键字后是定义的参与者名称fill:#333;小李小王Hi 小王你好，小李小李小王。
基于 mermaid 的在线流程图绘制方案
Dreamcatcher_yxc的博客
10-02 2429
一、项目背景 本项目是自己在公司做前端网页的时候，后端需要做一个流程控制引擎，给出了节点信息和节点之间的连接信息，老板希望根据这些信息把流程图画出来，当时自己的第一感觉就是在网上寻找开源项目，但是发现找到的大多都不是开源的，找了一天时间也没有找到比较容易上手的解决方案。 后来想着 markdown 不是能够通过代码的方式直接画流程图吗？想着能不能在前端把后端的流程图信息转换为 markdown 支持的 mermaid 定义信息直接画图呢？说干就干，于是就有了这个小项目。 二、项目使用介绍 本项目允许
开发人员必备工具！mermaid的详细教学
zhangqinhang1的博客
10-16 2456
Mermaid 是一个基于 JavaScript 的图表绘制库，它可以用于创建流程图、状态图、时序图以及甘特图等各种类型的图表。它以 HTML 形式渲染图表，而不是生成静态图片，这使得它更加灵活和安全。项目地址Mermaid 官方项目地址项目应用：Mermaid 用于在 web 环境中创建各种类型的图表。它可以用于文档、技术博客、项目文档等等，特别适合于与 Markdown 结合使用。Mermaid 可以帮助用户以直观的方式展示各种流程、状态、时序等信息，从而提高文档的可读性和可理解性。
vscode mermaid
07-27
VSCode Mermaid 是一个 Visual Studio Code 的插件，用于在编辑器中绘制流程图、时序图、类图等。它基于 Mermaid.js，是一个支持 Markdown 语法的流程图绘制工具。 要在 VSCode 中使用 Mermaid 插件，可以按照以下步骤操作： 1. 在 VSCode 中打开扩展面板（快捷键为 Ctrl + Shift + X）。 2. 在搜索框中输入 "Mermaid"，然后选择 "Mermaid Markdown Syntax Highlighting" 这个插件进行安装。 3. 安装完成后，重新启动 VSCode。 4. 在 Markdown 文件中，使用三个反引号（```）包裹 Mermaid 代码块，并指定语言为 "mermaid"。 5. 在 Mermaid 代码块中编写你想要绘制的流程图、时序图等内容。 以下是一个简单的示例： ```mermaid graph LR A --> B B --> C C --> D ``` 这样就可以在编辑器中渲染出一个简单的流程图。你可以根据 Mermaid 的语法规则编写更复杂的图表。 希望这个回答对你有帮助！如果你有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值