如何在 azure devops wiki 或者任何 markdown 页面上加入 mermaid 类图 (class diagram)

最新推荐文章于 2024-03-18 19:16:02 发布
最新推荐文章于 2024-03-18 19:16:02 发布
阅读量867 收藏 1
点赞数 1
分类专栏： devops 文章标签： markdown wiki azure devops
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/surfirst/article/details/116355965
版权

Azure DevOps wiki 只支持使用 Mermaid 创建序列图、甘特图和流程图，而 Mermaid 支持的图形种类远远不止这三种。当然我们可以直接用其他工具创建好图形然后复制到我们的 wiki 页面里，但是这样就失去了共同创作的机会。

我们可以使用下面的步骤来把 Mermaid 图形加到 wiki 页面里，同时又可以让其他同事修改。本方法不仅支持Azure DevOps wiki，也支持任何使用 Markdown 创建的页面。

  1. 使用 mermaid’s live editor 创建页面

  2. 点击 mermaid’s live editor 右下角的 Copy Markdown 按钮复制图形信息
    Copy Markdown

  3. 复制图形信息到 wiki 页面里
    示例如下：

[![](https://mermaid.ink/img/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjp7fSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjp7fSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

下面是上面的代码在 CSDN 博客的 Markdown 页面里显示的样子：

点击上面的图片可以继续修改 Mermaid 图形。

结论

我们使用 mermaid’s live editor 的 copy markdown 功能，成功地让支持有限的 Mermaid 图形的 Azure DevOps wiki 支持了包括类图在内的所有 Mermaid 图形。

参考链接

https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops
https://developercommunity.visualstudio.com/t/mermaid-support-for-class-diagrams-and-state-diagr/883356

surfirst
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在线绘制流程图网站、思维导图网站总结
qq_42092076的博客
03-27 1005
本篇博客总结了在线绘制流程图、思维导图的几个网站，欢迎留言补充 1.processsOn 免费在线作图、实时协作 支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等 2.爱莫流程图 爱莫流程图，便捷的思维导图工具。让您在线创建、保存并分享您的思路。 流程图,思维导图,在线,分享,协作,Brain mapping,Mind mapping,svg,minder, 3.百度脑图 免安装...
flowchartwiki:MediaWiki扩展可从页面之间的链接创建流程图。-开源
05-12
请访问http://www.flowchartwiki.org以获取最新的下载和信息。 Flowchartwiki是MediaWiki的扩展，用于从Wiki页面之间的链接创建流程图以支持MediaWiki中的流程建模和流程文档。
Azure DevOps服务之Wiki---绘图总结
qq_46049113的博客
09-16 806
绘图方法总结
mermaid-diagrams:使用美人鱼语法在 wiki 页面中启用序列图的扩展
08-03
美人鱼图 一个简单的 chrome 扩展，用于在 github、bitbucket 和 Azure DevOps 页面中添加对语法的支持。 例如，将此添加到 github 中的任何 wiki 页面或 Markdown 文件 示例 1 sequenceDiagram A->> B: Query B->> C: Forward query Note right of C: Thinking... C->> B: Response B->> A: Forward response 示例 2 sequenceDiagram A->> B: Query B B->> C: Forward query B Note right of C: Thinking of B... C->> B: Response of B B->> A: Forward re
【MarkDown】CSDN Markdown之类图classDiagram详解
少莫千华
06-15 1376
类图(Class diagram)是显示了模型的静态结构，特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。它既用于应用程序的系统分类的一般概念建模，也用于详细建模，将模型转换成编程代码。类图也可用于数据建模。
azuredevops-export-wiki：Azure DevOps WIKI导出脚本
02-25
Azure DevOps WIKI导出脚本将Azure DevOps WIKI导出到： 降价促销HTML PDF格式支持： 通过CSS定制开始使用该脚本是使用Python 3伪造的，因此请确保已安装该脚本。初始化python虚拟环境假设它将位于.venv文件夹中。在...
AzureDevOps.WikiPDFExport:将Azure DevOps Wiki导出为PDF
05-04
您可以在Wiki主页的右上角获得Wiki的克隆链接： 要克隆此Wiki，请使用以下命令： git clone https://dev.azure.com/mmelcher/AzureDevOps.WikiPDFExport/_git/AzureDevOps.WikiPDFExport.wiki 结果应如下所示： ...
aks-azuredevops-agent：Azure Kubernetes上的自托管Azure DevOps代理
02-01
aks-azuredevops-agent：Azure Kubernetes上的自托管Azure DevOps代理
azure-devops-python-api：Azure DevOps Python API
01-29
Azure DevOps Python API 此存储库包含用于与Azure DevOps进行交互和管理的Python API。 这些API支持Azure CLI的Azure DevOps扩展。 要了解有关Azure CLI的Azure DevOps扩展的更多信息，请访问回购。 安装 pip ...
AzureDevOpsToGitHubRepoMigrator:将Git Repo从Azure DevOps迁移到GitHub的实用程序（包括历史记录，分支和标签）
04-12
如果要查看有关如何从Azure DevOps Repos迁移到GitHub的深入说明，请在YouTube上查看以下视频： 用法 进行迁移的主要方法有3种： 剧本 手动或自动 详细或沉默 查看以获取更多信息 Docker容器 在Docker Hub上使用...
wiki-mermaid
04-08
维基美人鱼 笔记 您必须有一个非空的output/目录... 例子 这是一个内联美人鱼文件 人鱼标记graph TD; A-->B; A-->C; B-->D; C-->D; W-->D; E-->S; S-->T;
mermaid 用法
nankeyimeng的博客
01-04 3798
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(flowch
Markdown中插入类图（classDiagram）
acktomas的博客
06-19 1530
参考网址：https://mermaid-js.github.io/mermaid/#/classDiagram类图是面向对象建模的主要构建基块。它用于应用程序结构的一般概念建模，以及将模型转换为编程代码的详细建模。类图也可用于数据建模。类图中的类表示主要元素、应用程序中的交互以及要编程的类。mermaid可以渲染类图。 #mermaid-svg-lw05uaRjw2rW2Hl0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:1
Mermaid知识点总结7 - Class Diagram
u011315681的博客
09-08 1705
Class Diagrams 在软件工程中，class diagram在Unified Modeling Language(UML)中描述了系统中类的结构特征以及操作和关系 下面给出了一个绘制class diagram的实例： classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String
Markdown 类图绘制详解
小北的博客
01-18 1181
类图是一种面向对象的建模形式。它是应用系统结构的概念模型，通常与开发时的代码有严格的对应关系。类视图也可以用于数据建模。
Mermaid语法说明
m0_51336955的博客
03-18 1696
quad\quad在中，有两种方式可以定义一个类，直接给出例子-int idfill:#333;stroke:1;fill:none;important;important;important;important;important;important;important;important;important;important;important;important;important;important;important;important;
obsidian中Mermaid语法——UML类图 (Class Diagram)
harry0936的博客
03-18 1662
使用关键字class，如会定义Animal类。通过关系，在一次定义中同时定义两个类及其关系。例如，。fill:#333;stroke:1;fill:none;important;important;important;important;important;important;important;important;important;important;important;important;important;important;important;important;Animal。
Mermaid classDiagram类图应用举例 汉，蜀汉，刘宋关系图
SKPrimin的博客
07-23 454
Mermaid classDiagram类图应用举例 汉，蜀汉，刘宋关系图 西汉、东汉、蜀汉、刘宋 源代码如下，效果图在后 classDiagram class 刘邦{ <<-201--195>> -太祖() 高皇帝 } class 刘盈{ <<-194--188>> 惠帝 } class 刘恭{ <<-187--184>> 前少帝 } class 刘弘{ <<-183--180>> 后少帝 } cl
嵌入式知识图谱WiKi（嵌入式开发/研发入门教程和路线图）
qq582880551的博客
02-19 5827
嵌入式知识图谱WiKi 作者 将狼才鲸 时间 2022-02-18 Gitee文档源文件仓库网址 才鲸 / 嵌入式知识图谱WiKi CSDN有图的文档阅读网址 嵌入式知识图谱WiKi Bilibili视频讲解网址（待完成） 才鲸嵌入式主页 一、概述 1. 模块框图 备注：gitee暂不支持mermaid框图和流程图显示。可以下载本git仓库并用Typora等软件打开本.md文件查看。 也可以点击该CSDN同名文章查看能正常显示图片的版本。 备注：因为mermaid subgrap
Azure devops 面试题
最新发布
04-09
Azure DevOps是微软提供的一套云端应用程序生命周期管理工具，它集成了代码托管、持续集成/持续交付、项目管理、测试管理等功能，可以帮助团队更高效地进行软件开发和交付。下面是一些常见的Azure DevOps面试题及其...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

surfirst

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值