Gitee 官方博客
  • 产品动态
  • 企业案例
  • 项目推荐
  • 关于开源
  • 发现更多
  • 回到 Gitee
  • 产品动态
  • 企业案例
  • 项目推荐
  • 关于开源
  • 发现更多
  • 回到 Gitee

Gitee 现已全面支持 Mermaid 图表渲染

Gitee
9月前发布在 产品动态

什么是 Mermaid

Mermaid 是一种基于 Javascript 的绘图工具,使用类似于 Markdown 的语法,使用户可以方便快捷地通过代码创建图表。

Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客
图源:Mermaid 官方文档

也就是说,你可以通过 Mermaid,在本不支持复杂图表的 Markdown 文档中,以 Markdown 的方式插入你想要图表样式,包括流程图、饼状图等等,让你的 Markdown 文档的可视化程度大大增强。

如何在 Gitee 上使用 Mermaid

在 Typora、Obsidian 等常用的 Markdown 编辑器上,你可以通过代码块的方式添加 Mermaid 图表,只需要将代码块的语言更改为mermaid即可,如下面的代码所示:

    ```mermaid
    graph TD; //流程图,由上往下
      A-->B;
      A-->C;
      B-->D;
      C-->D;
    ```

该语法输出的就是下面这张流程图:

Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客

那么有人可能会问了,这么美观大方的流程图,是在什么编辑器上渲染出来的呢?

马建仓大声地告诉你,这么美观大方的流程图,现在在 Gitee 上就可以渲染出来!

Gitee 中的 Markdown 编辑器已经全面支持 Mermaid,你可以在仓库的 PR、Issue、Readme、Wiki 和评论中使用 Mermaid,通过图表来更全面地发表你的观点。

Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客

Mermaid 语法示例

Mermaid 的能力当然不止于流程图,下面我们来看看还能用 Mermaid 做出哪些炫酷的图表。

时序图(Sequence Diagram)

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客

状态图(State Diagram)

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客

饼状图(Pie Chart Diagrams)

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客

Git 分支图(Gitgraph Diagrams)

gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit
Gitee 现已全面支持 Mermaid 图表渲染-Gitee 官方博客

当然,以上这些示例只展示了它的基础用法,Mermaid 同样支持更改图表中各种元素的样式,以便你完成更加复杂的图表设计。

目前该功能已经在 Gitee 全面上线,你现在就可以在 Gitee 上尽情地发挥你的创造力,用 Mermaid 图表展示你脑海中的奇思妙想吧!

GiteemarkdownMermaid

本文系作者 @Gitee 原创发布在 Gitee 官方博客。未经许可,禁止转载。

安盟信息,如何用Gitee筑牢研发管理的安全防线
上一篇
Gitee携手高德智感,助力国产红外研发持续精进
下一篇
近期文章
  • 金融人怎么写出安全可靠的代码?知名证券企业这样做
  • 16家单位、2万名研发,金融科技领头羊如何集中统一代码管理?
  • 《Gitee 专业版白皮书》重磅发布,助力企业实现高效、快捷交付
  • Gitee x 未来物联:高效能产研团队是怎样炼成的?
  • 《2022 中国开源开发者报告》正式发布!
  • 开工福利:领取新人专属多重福利
  • 点击查看2022年你与Gitee的记忆
  • 我们让 ChatGPT 写了一篇开源项目推荐
  • Gitee 自动化全新上线,让提效融入每处细节
  • Gitee Scan 四大升级,助力企业完美实现质量左移
相关文章
16家单位、2万名研发,金融科技领头羊如何集中统一代码管理?
《Gitee 专业版白皮书》重磅发布,助力企业实现高效、快捷交付
点击查看2022年你与Gitee的记忆
我们让 ChatGPT 写了一篇开源项目推荐
关于我们

Gitee(gitee.com)是 OSCHINA.NET 推出的代码托管·协作开发平台,支持 Git 和 SVN,提供免费的私有仓库托管。目前已有超过 800 万的开发者选择 Gitee。

品牌内容
开源软件 GVP计划 Gitee 封面人物 CopyCat 代码克隆检测
友情链接
开源中国 Gitee Gitee 高校版 Gitee 企业版
Copyright © 2023 Gitee 官方博客. Designed by nicetheme.
  • 产品动态
  • 企业案例
  • 项目推荐
  • 关于开源
  • 发现更多
  • 回到 Gitee
热门搜索
  • Gitee
  • gitee 企业版
  • 码云
  • 开源项目
  • 码云Gitee
  • GVP
  • Git
  • 开源
  • 码云企业版
  • 码云周刊
  • 码云 gitee
  • gitee企业版
  • 内源
  • 内部开源
  • innersource
  • DevOps
  • 小程序
  • 企业版
Gitee
安全、稳定、高效的云端软件开发协作平台。
Top