Hexo中插入mermaid diagrams

最新推荐文章于 2024-04-29 22:17:03 发布
最新推荐文章于 2024-04-29 22:17:03 发布
阅读量4.5k 收藏 2
点赞数 2
文章标签： hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Olivia_Vang/article/details/92987859
版权
本文详细介绍了如何在Hexo博客中插入并配置Mermaid diagrams，包括安装插件、修改配置文件、js文件调整、语法说明，以及如何个性化设置背景颜色。通过这个教程，你可以让自己的Hexo博客支持流程图、序列图和甘特图等多种图表展示。
摘要由CSDN通过智能技术生成

自己原创文章link：https://wangxiaoyu-go.github.io/2018/11/23/hexo-filter-mermaid-diagrams/

Table of Contents

安装插件

修改配置文件

js文件修改

语法

效果

个性化背景颜色

 

以下是使用中的hexo插入mermaid diagrams的方法。
感谢做插件的人！

github参考link

Mermaid diagrams介绍gitbook

安装插件

npm install hexo-filter-mermaid-diagrams

修改配置文件

在hexo的_config.yml文件（根目录的并非主题的）中，添加以下内容：

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options f

最低0.47元/天 解锁文章
Olivia_Vang
关注
hexo优化：Markdown语法引入Flowchart和Mermaid流程图
Nolimited-Study的博客
11-29 3206
引入flowchart流程图 1、添加支持 Hexo 默认下markdown不支持flowchart流程图，需要添加支持，用git-bash在hexo目录下进行输入： npm install --save hexo-filter-flowchart 接下来只需要输入对应的实例来测试就可以了。 2、测试 接下来，先进行测试一下，使用markdown进行编写flowchart语句。如下所示： ··...
mermaid流程图工具_Markdown Mermaid 流程图
weixin_33694136的博客
01-27 265
Markdown Mermaid 流程图语法笔记，以及 GitHub、Hexo-Next-Theme 和相关编辑器的支持一切从简，少用图，多用流程图Markdown语法Mermaid 语法代码块选择 mermaid 语言sequenceDiagramsequenceDiagramAlice->>John: Hello John, how are you?John-->>Al...
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
Mermaid安装及绘制流程图
qq_46457076的博客
01-13 3559
使用 Mermaid 绘制流程图以及 Mermaid 的安装配置！
mermaid流程图工具_Hexo+Mermaid(一)：记住三、四、五，玩转Mermaid流程图
weixin_39852121的博客
12-20 868
流程图，英文Flow Chart，是使用图形表示算法思路是一种方法。在Hexo中提供了插件，使得我们可以利用Mermaid这个库来实现流程图，它的显示结果非常漂亮优雅。Mermaid提供的流程图是一个简化版的，它主要由节点和连线组成，再以文字辅助，总共三种要素。这里的三、四、五，其中三表示三种基本线型，四表示流程图四个方向，五表示五种节点形状。0. Hexo+Mermaid专题目录1. 三种基本线...
用Mermaid画流程图、序列图、类图、甘特图
最新发布
一点
04-29 1126
Mermaid 是一种基于文本的图表定义语言，它允许开发者使用文本和代码的形式来创建图表。这种语言的设计初衷是为了方便版本控制和多人协作，同时简化图表的维护和更新过程。我也是最近在接触到了这个Mermaid，提供了一个强大而灵活的方式来创建图表，特别适合于需要频繁更新图表内容的技术文档和软件开发项目。总的来说这个Mermaid有一定的学习成本，因为有相关大量的语法需要学习，用不用主要看自己吧，了解一些总是百利而无一害的，你说是吧！左手编程，右手年华。大家好，我是一点，关注我，带你走入编程的世界。
hexo文章插入图片方法小结
u014155600的博客
02-09 1368
hexo插入图片方法总结
向 Hexo 博客中插入 Jupyter Notebook
The_last_knight的博客
10-30 900
因为 Python 的笔记使用 Jupyter Notebook 进行记录十分的方便，并且 Jupyter Notebook 本身也支持 Markdown 的语法，所以在学习 Python 有关的内容时我喜欢使用 Jupyter Notebook 进行记录，但是一般我的笔记都分布在 Hexo 博客中，但是 Hexo 博客只能解析 Markdown，所以如何将 Jupyter Notebook 整合到 Hexo 博客中成了我的一大难题，经过几次的折腾，算是比较完美的解决了我的需求。 下面介绍我依次使用的方法
hexo-jupyter-notebook：一种hexo工具，可让您在hexo博客中插入jupyter笔记本
02-04
使用Hexo中的* .ipynb之类的jupyter笔记本。 安装 $ npm install hexo-jupyter-notebook --save 用法 检查是否已安装pandoc（pandoc --version）； 如果需要，请安装： sudo apt-get install pandoc 或Mac brew ...
mermaid-diagrams-crx插件
04-01
语言:English (United States) 在github wiki和markdown文件上启用`美人鱼图表 在github wiki和markdown文件中启用`mermaid图表`，如这里所在的github wiki和markdown文件：http：//knsv.github.io /mermaid/index.html。 例如，将此添加到GitHub中的任何Wiki页面或标记文件中 ```美人鱼 SequentSiagram. A - >> B：查询 B - >> C：转发查询 C：思考...... C - >> B：响应 B - >> A：转发响应 ``` 如果从GitHub加载，这将生成一个很好的图。 扩展名将用生成的图替换代码块。
Hexo中插入图片hexo asset image
Yu's Notes
06-20 1426
自己原创文章link: https://wangxiaoyu-go.github.io/2018/11/18/hexo-asset-image/ 以下原文复制： 介绍一下使用中的hexo插入图片的方法。 github参考link Table of Contents 安装插件 编辑配置文件 图片插入时的语法 安装插件 npm 安装 npm install hexo-as...
【MERMAID】UML 统一建模语言 —— 类图（Diagram）
おうせき碩の博客
02-03 458
  愿你如阳光，明媚不忧伤。 目録1. UML 概述2. 类成员的可见性及返回值类型3. 类图关系4. 关系的基数 / 多重性5. 类注释5. 完整示例   1. UML 概述 UML （Unified Modeling Language）统一建模语言，是一种为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言，是非专利的第三代建模和规约语言，独立于任何具体程序设计语言。UML立足于对事物的实体、性质、关系、结构、状态和动态变化过程的全程描述和反映，可以从不同角度描述人们所观
用mermaid写sequenceDiagram
k的博客
03-15 2388
systemdeliveryorderInfouser用户支付成功，开始派单查看订单用户信息user name,phone,address开始配送回馈信息本次送单成功重新派单重新配送回馈信息loop[ 配送失败 ]本次送单成功alt[ 用户确认订单 ][ 出错联系平台 ]配送成功systemdeliveryorderInfouser 源代码就是 sequenceDiagram participan...
Markdown(四)——绘图工具mermaid之状态图stateDiagram
热门推荐
qq_36749906的博客
07-20 1万+
前言：在做软件工程时经常会需要用到绘图来帮助理解软件构造，CSDN的编辑器集成了插入绘图工具mermaid,以下是对其常用语法的一些记录整理   以下是学习mermaid语法的官网：https://mermaid-js.github.io/mermaid/#/   每个代码块都要用以下代码包括进去,才能保证被MarkDown解释器解释为UML图： ```meraid ``` 状态图 1.状态   状态图的定义有很多，为了便于记忆，个人挑选了最常用的一种写法： ```mermaid stateDiagr
Hexo中引入Mermaid流程图
ftm_csdn的博客
01-17 851
主要参考这篇文章，另外一定要参考官网手册。mermaid Hexo中引入Mermaid流程图
mermaid流程图语法教程
acktomas的博客
05-08 5379
indexflowchart - 基本语法一个节点(默认)带文本的节点图形flowchart 方向节点形状体育场形状的节点子程序形状中的节点圆柱形节点圆形节点不对称形状的节点一个节点(菱形)六边形节点平行四边形平行四边形替代梯形[梯形 alt](https://mermaid-js.github.io/mermaid/#/flowchart?id=trapezoid-alt)双圈节点之间的链接带箭头的链接一个开放的链接链接上的文字带有箭头和文本的链接虚线链接带文本的虚线链接厚链接带文本的粗链接链接的链
OD(9)之Mermaid序列图(Sequence diagrams)使用详解
Once_day的回忆
02-22 2555
序列图是一种用于展示系统中对象之间如何交互的UML（统一建模语言）图。它们主要用于展现对象之间交互的顺序，这些交互以时间顺序排列，通常用于系统分析和设计阶段来捕捉系统的动态行为。序列图描述了参与交互的对象集合以及它们之间消息传递的时间顺序，非常直观地表示了各个组件或对象在整个流程中的作用和活动。序列图的功能在于能够清晰地显示多个对象在某个业务流程或用例中的交互方式。它可以帮助开发者和系统分析师理解系统运行的具体细节，便于发现系统设计中的问题，并且为代码实现提供参考。
Mermaid classDiagram类图应用举例 汉，蜀汉，刘宋关系图
SKPrimin的博客
07-23 473
Mermaid classDiagram类图应用举例 汉，蜀汉，刘宋关系图 西汉、东汉、蜀汉、刘宋 源代码如下，效果图在后 classDiagram class 刘邦{ <<-201--195>> -太祖() 高皇帝 } class 刘盈{ <<-194--188>> 惠帝 } class 刘恭{ <<-187--184>> 前少帝 } class 刘弘{ <<-183--180>> 后少帝 } cl
hexo使用oss插入图片教程
10-17
好的，下面是使用 Hexo 插入图片到阿里云 OSS 的教程： 1. 安装 hexo-deployer-aliyunoss 插件 在 Hexo 博客根目录下执行以下命令： ``` npm install hexo-deployer-aliyunoss --save ``` 2. 配置插件 在 Hexo 博客根目录下的 `_config.yml` 文件中添加以下配置： ``` deploy: type: aliyunoss region: <OSS Bucket 所在地域> accessKeyId: <Access Key ID> accessKeySecret: <Access Key Secret> bucket: <OSS Bucket 名称> prefix: <OSS Bucket 中存储博客文件的路径> acl: public-read ``` 其中，`region`、`accessKeyId`、`accessKeySecret`、`bucket`、`prefix` 都需要替换成你自己的信息。 3. 上传图片 将图片上传到 OSS Bucket 中，可以使用阿里云官方提供的 [OSS Browser](https://oss.console.aliyun.com/overview) 工具或者其他 OSS 客户端工具。 4. 插入图片 在 Markdown 文件中插入图片时，使用以下格式： ``` ![图片描述](https://<OSS Bucket>.<OSS Bucket 所在地域>.aliyuncs.com/<存储博客文件的路径>/<图片文件名>) ``` 其中，`<OSS Bucket>`、`<OSS Bucket 所在地域>`、`<存储博客文件的路径>`、`<图片文件名>` 都需要替换成你自己的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值