github中Mermaid的用法

这篇具有很好参考价值的文章主要介绍了github中Mermaid的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这个东西是最近推出,首先是自己的repository中新建一个readme.md文件

需要一点前端的知识,就是先导入一个依赖文件,然后再写甘特图,如下:

### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

```
gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-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
```

```mermaid
gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-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
```

展示效果如下:

github中Mermaid的用法,github

 如果没有开头的插件,是不会成功显示的。文章来源地址https://www.toymoban.com/news/detail-595242.html

到了这里,关于github中Mermaid的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Git和Github的基本用法

    Git和Github的基本用法

    目录 背景 下载安装 安装 git for windows 安装 tortoise git 使用 Github 创建项目 注册账号 创建项目 下载项目到本地 Git 操作的三板斧 放入代码 三板斧第一招: git add 三板斧第二招: git commit 三板斧第三招: git push 小结 🎈个人主页:库库的里昂  🎐CSDN新晋作者  🎉欢迎 👍点赞✍评

    2024年02月10日
    浏览(8)
  • github pages 用法详解 发布自己的网站

    github pages 用法详解 发布自己的网站

    github pages 基础用法 URL 规则 假设你的 github 帐号为 mygithub,需要发布的仓库名为 myrepo,那么 pages 的 URL 为: https://mygithub.github.io/myrepo 添加内容 用任意编辑器写好(或者生成)标准的网页内容,push 到 myrepo 即可。和大部分 web 服务一样,pages 会到指定目录里面寻找 index.html

    2024年02月13日
    浏览(11)
  • GitHub新手用法详解【适合新手入门-建议收藏!!!】

    GitHub新手用法详解【适合新手入门-建议收藏!!!】

    目录 什么是Github,为什么使用它? 一、GitHub账号的注册与登录 二、 gitbash安装详解 1.git bash的下载与安装 2.git常用命令  3. Git 和 GitHub 的绑定 1. 获取SSH keys  2.绑定ssh密钥 三、通过Git将代码提交到GitHub 1.克隆仓库   2.测试提交代码         GitHub是一个面向开源及私有软件项

    2023年04月24日
    浏览(48)
  • Mermaid流程图

    Mermaid流程图

    mermaid简介 Mermaid是一个基于JavaScript的绘图工具,使用类似于Markdown的语法,允许用户通过代码创建各种图表,包括流程图、状态图、时序图和甘特图等。它可以将代码块转化为HTML代码,并支持多种图表的方向。Mermaid极大地简化了复杂图的绘制和维护,对于熟悉Markdown语法的用

    2024年01月19日
    浏览(10)
  • Mermaid语法使用

    Mermaid语法使用

    支持图标类型 定义 说明 pie 饼状图 graph 流程图 sequenceDiagram 时序图 stateDiagram 状态图 gantt 甘特图 classDiagram 类图 方向定义 用词 含义 TB 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 节点定义 描述 说明 id[文字] 矩形节点 id(文字) 圆角矩形节点 id((文字)) 圆形节点 id文字] 右向

    2024年02月13日
    浏览(6)
  • Mermaid 教程

    Mermaid 教程

    Mermaid 是一个用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它使用类似于 Markdown 的文本语法,使得创建图表变得简单直观。以下是一个简单的 Mermaid 教程,介绍如何使用 Mermaid 创建流程图、时序图和甘特图。 可以通过以下方式在你的项目中安装 Mermaid: 或者直接在

    2024年01月20日
    浏览(5)
  • Mermaid使用教程(绘制各种图)

    Mermaid使用教程(绘制各种图)

    简介 本文将主要介绍使用Mermaid绘制各种各样的常用的图,例如:饼状图、序列图、甘特图等等,当然Mermaid也可以用来绘制流程图,可以参见我的另一篇文章: https://blog.csdn.net/m0_54218263/article/details/135684176 饼状图 Mermaid 是一个用于生成图表和流程图的 JavaScript 库,它使用 M

    2024年01月21日
    浏览(11)
  • Mermaid安装及绘制流程图

    默认的 Hexo 安装包括一个 MarkDown 渲染器插件,该插件使用 hexo-renderer-marked ,而 hexo-renderer-markdown-it 是一款用于 Markdown 解析和渲染的插件,用于替换 Hexo 默认自带的 Markdown 渲染器,提供了更丰富的 Markdown 解析和渲染,替换命令如下: Mermaid 是一个支持 MarkDown 的流行的 js 图标

    2024年02月04日
    浏览(25)
  • ChatGPT+Mermaid自然语言流程图形化产出小试

    ChatGPT+Mermaid自然语言流程图形化产出小试

    本文旨在介绍如何使用ChatGPT和Mermaid语言生成流程图的技术。在现代软件开发中,流程图是一种重要的工具,用于可视化和呈现各种流程和结构。结合ChatGPT的自然语言处理能力和Mermaid的简单语法,可以轻松地将文本描述转化为图形表示,使技术文档更具可读性和易懂性。 在

    2024年02月09日
    浏览(12)
  • Markdown 进阶语法:Mermaid 绘图 (一) - 流程图 (Flowchart)

    Markdown 进阶语法:Mermaid 绘图 (一) - 流程图 (Flowchart)

    ✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 Mermaid 是一个基于 JavaScript 的图表绘制工具,

    2024年02月12日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包