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

最新推荐文章于 2025-10-13 17:14:11 发布
原创 最新推荐文章于 2025-10-13 17:14:11 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#markdown #wiki #azure #devops

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/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0Z
最低0.47元/天 解锁文章
在线绘制流程图网站、思维导图网站总结
qq_42092076的博客
03-27 1370
本篇博客总结了在线绘制流程图、思维导图的几个网站，欢迎留言补充 1.processsOn 免费在线作图、实时协作 支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等 2.爱莫流程图 爱莫流程图，便捷的思维导图工具。让您在线创建、保存并分享您的思路。 流程图,思维导图,在线,分享,协作,Brain mapping,Mind mapping,svg,minder, 3.百度脑图 免安装...
Markdown 中的图表 Mermaid 与 classDiagram
小猫三两只。
08-02 1812
本文对比了Markdown中的Mermaid和classDiagram两种图表工具。Mermaid是通用图表生成工具，支持流程图、时序图等10+图表类型，适用于技术文档和项目管理。classDiagram是Mermaid的子集，专门用于UML类图设计，展示类属性和继承关系。核心差异在于Mermaid功能广泛，classDiagram专注类图。选择策略：非类图场景用Mermaid，面向对象设计用classDiagram。两者可组合使用，在GitHub、VS Code等平台均能渲染，实现文档图表一体化维护。
Azure DevOps服务之Wiki---绘图总结
qq_46049113的博客
09-16 1135
绘图方法总结
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
Wiki知识库部署指南
最新发布
蜡笔小谢的博客
10-13 632
记录部署Wiki知识库时的主要步骤和防踩坑指南，以及部署后的一些网站客制化实用配置......
flowchartwiki:MediaWiki扩展可从页面之间的链接创建流程图。-开源
05-12
请访问http://www.flowchartwiki.org以获取最新的下载和信息。 Flowchartwiki是MediaWiki的扩展，用于从Wiki页面之间的链接创建流程图以支持MediaWiki中的流程建模和流程文档。
Markdown mermaid种草(5)_ 类图
耳东小白的小笔记本儿
02-20 4690
耳东小白倾情推荐，mermaid之类图绘制
【ZenUML】时序图之ZenUML详解
少莫千华
06-20 2444
序列图是一种交互图，显示进程如何彼此操作以及顺序。Mermaid可以使用ZenUML渲染序列图。请注意，ZenUML使用的语法与mermaid中的原始序列图不同。目前，最新版本暂时不单独支持zenuml语法,需要配合一起使用,zenuml与都是时序图，从时序图的作用和渲染大致框架来说基本没有区别，只是渲染的效果有差异。你可以使用在线编写。
软件工程自学考试：任务分析在敏捷开发中的应用
![任务分析类对象交互的描述-软件工程自学考试(全程学习版)](https://www.softwareideas.net/i/DirectImage/1607/sequence-diagram-in-uml) ...最后，本文展望了敏捷开发和任务分析的未来趋势，包括规模化敏捷和DevOps
版本控制系统整合：Git在ATE Studio项目协作开发中的4种最佳实践（团队必看）
![版本控制系统整合：Git在ATE Studio项目协作开发中的4...重点分析了在ATE Studio中配置Git插件、多分支协同策略设计、提交规范与代码审查机制，并深入研究了Git Hooks在测试脚本验证中的应用以及与CI/CD流水线的深度
案例研究】：如何在CMMI3级项目中制定需求规格说明书
[案例研究】：如何在CMMI3级项目中制定需求规格说明书](https://syndicode.com/wp-content/uploads/2022/07/Img-1-1-3-1024x430.png) # 摘要 本文综合探讨了CMMI3级项目中需求管理的理论基础、实践方法以及工具应用...
mermaid-demo
10-30
mermaid是一款开源的画流程图、时序图、甘特度的工具，提供了命令行和html两种使用方法。本例是在html中使用mermaid画出各种图的例子。
wiki-mermaid
04-08
维基美人鱼 笔记 您必须有一个非空的output/目录... 例子 这是一个内联美人鱼文件 人鱼标记graph TD; A-->B; A-->C; B-->D; C-->D; W-->D; E-->S; S-->T;
【MarkDown】 Mermaid 绘图不踩坑：10 分钟吃透常见绘图语法常见类型语法 + 实用案例
墩墩分墩
08-26 1464
Mermaid 是一种基于文本的图表生成工具，通过简洁的语法描述图表结构，自动渲染为可视化图形。支持 Markdown 集成，可直接嵌入文档或代码注释中，适用于技术文档、项目设计和数据展示。
markdown使用下使用mermaid做图
True Truth
08-19 3367
之前好像做过相关的笔记，但是一时不知道放到哪儿去了，这里再来快速的学习一下 mermaid主页的展示图 程序流程图 graph TD; //TD表示上下结构，很好理解， T->top, D->down / B->bottom. 当然类似的还要, R->right, L->left . //所以组合有从上倒下，从下到上。 从左到右，从右到左。 ...
obsidian中Mermaid语法——UML类图 (Class Diagram)
harry0936的博客
03-18 5786
使用关键字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类图
封楚寒的博客
01-19 6528
Mermaid类图 博客原文 英文原文 Class Diagram 类图用于面向对象对于应用结构概念建模, 也用于把具体的模型翻译成程序代码. 类图也可以用于数据建模 mermaid渲染: #mermaid-svg-zruYZVT1C8bmcQOP .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-zruYZVT1
【MarkDown】优快云 Markdown之类图classDiagram详解
少莫千华
06-15 2230
类图(Class diagram)是显示了模型的静态结构，特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。它既用于应用程序的系统分类的一般概念建模，也用于详细建模，将模型转换成编程代码。类图也可用于数据建模。
Mermaid classDiagram类图应用举例 汉，蜀汉，刘宋关系图
SKPrimin的博客
07-23 569
Mermaid classDiagram类图应用举例 汉，蜀汉，刘宋关系图 西汉、东汉、蜀汉、刘宋 源代码如下，效果图在后 classDiagram class 刘邦{ <<-201--195>> -太祖() 高皇帝 } class 刘盈{ <<-194--188>> 惠帝 } class 刘恭{ <<-187--184>> 前少帝 } class 刘弘{ <<-183--180>> 后少帝 } cl
Azure DevOps Wiki快速转换PDF工具使用指南
资源摘要信息:"AzureDevOps.WikiPDFExport是一个工具，可以将Azure DevOps Wiki导出为PDF格式。这个过程首先需要你将目标Wiki克隆到本地计算机上。你可以在Wiki主页的右上角找到克隆链接。克隆命令格式为：git clone...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

surfirst

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

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

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

打赏作者

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

抵扣说明：

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

余额充值