Hugo中使用Mermaid

最新推荐文章于 2025-07-10 00:40:33 发布

姑苏流白

最新推荐文章于 2025-07-10 00:40:33 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Hugo博客文章标签： hugo mermaid

本文链接：https://blog.youkuaiyun.com/AnonymKing/article/details/86261554

Hugo博客专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Mermaid.js在网页中绘制简洁的流程图。通过具体的代码示例，展示如何创建基本的节点连接及特殊箭头样式，帮助读者快速上手Mermaid语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0x00 引入mermaid.js
0x01 引入代码

 <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
  </div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

姑苏流白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

hugo加入mermaid作图

02-02

1393

1、画图 vi content/post/first.md draft: false #添加下面代码 <div class="mermaid"> graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); </div> 2、添加mermaid脚本 vi ...

给Hugo添加Mermaid支持

weixin_54227075的博客

05-15

605

Hugo是一款搭建个人博客的框架，支持使用 Markdown 格式的文件生成 HTML 文件。hugo-theme-even 则是 Hugo 的一个主题。Mermaid 则是一个支持在 Markdown 下生成图表的工具。因为 Hugo 并不原生支持 Mermaid ，所以本文的目的是，基于 hugo-theme-

参与评论您还未登录，请先登录后发表或查看评论

Hugo 详解-静态网站生成器的全面指南

热门推荐

平头

03-04

10万+

Mermaid 实用教程 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。之前用过 PlantUML，但是发现这个东西的实现原理是生成 UML 的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。 Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段...

hugo+GitHub搭建博客网站

vfffb的博客

05-09

1148

sudo pacman -S hugo 创建博客站点 # 创建文件夹并进入此目录 mkdir projcet cd projcet # 创建新博客站点 hugo new site blog 下载主题 git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke 编辑 config.toml 配置文件添加刚下载的主题 theme = ‘ananke’ ............

hugo-shortcode-diagram:雨果简码呈现Kroki图

05-23

雨果简码呈现Kroki图 diagram Hugo 在markdown文本中呈现了支持的图表。... 用法包括在您的Hugo config....如果您在Hugo中使用config.toml [[module.imports]] path = "github.com/netspective-studios/hugo-shortco

(源码)基于Hugo和Docsy主题的技术文档网站生成器.zip

06-10

UML图绘制支持使用PlantUML和Mermaid在文档中绘制UML图。 PDF文档生成支持使用wkhtmltopdf工具将文档网站生成为PDF格式。静态网站生成通过Hugo生成静态文档网站，并可部署到Nginx服务器上。 ## 安装使用步骤

macdown插入mermaid

03-14

### 如何在 Markdown 中插入 Mermaid 图表要在 Markdown 文件中成功插入 Mermaid 图表，需满足以下几个条件： #### 1. 使用支持 Mermaid 的 Markdown 编辑器并非所有的 Markdown 编辑器都原生支持 Mermaid 插件...

mermaid离线工具

04-26

### Mermaid 离线工具下载与使用 Mermaid 是一种用于生成图表的简单标记...总结而言，无论是选用便捷易上手的IDE附加组件还是深入定制化程度更高的原生解决方案，都能满足日常工作中关于Mermaid离线使用的各类诉求哦~

mermaid怎么下载安装

02-18

许多现代的静态站点生成器（如 Hugo、Jekyll）以及一些流行的 Markdown 编辑器都支持内置 Mermaid 渲染功能。只需启用相应插件即可轻松使用 Mermaid 绘制图形。 #### 方法三：作为 npm 包安装对于开发者来说，可以...

hugo-theme-learn:将Grav Learn主题移植到Hugo

05-02

雨果学习主题这个库包含了一个基于伟大的。请访问以查看发生了什么。它实际上是以此主题构建的。主要特点自动搜寻多语言模式无限的菜单级别自动下一个/上一个按钮浏览菜单项图像调整大小，阴影… 附件文件列出子页面美人鱼图（流程图，序列，甘特图）可自定义的外观和主题变体按钮，提示/注释/信息/警告框，展开安装导航到您的Hugo网站中的主题文件夹，然后使用以下命令： cd themes/ git clone https://github.com/matcornic/hugo-theme-learn.git 检查您的Hugo版本是否至少0.25 hugo version 0.25 。用法下载旧版本（2.0.0之前的版本）如果出于兼容性目的需要旧版本，请下载或使用正确的git标签。例如，对于1.1.0 直接下载方式：： //github.com/mat

hugo-theme-learn, 移植地心引力向Hugo学习主题.zip

09-17

hugo-theme-learn, 移植地心引力向Hugo学习主题学习主题这个库包含了一个主题为 Hugo，基于伟大的重力学习主题。访问主题文档查看发生了什么。它是用这个主题构建的。的主要功能自动搜索多语言模式无限菜单级别自动下一个/上一个按钮在菜单项中导航图像调整大小，阴影。附件文

Mermaid流程图

拱卒的博客

08-10

5201

官网 Github 项目地址一、介绍 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中二、流程图基础 1、流程图符号和含义 Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来也不难，比如矩形 [],圆角矩形(),圆形(()) 图形符号含义圆角矩形表示开始和结束 id(“文字”) 矩形表示过程环节 id["文字"] 单向箭头线段表示流程进行方向

Vue前端页面嵌入mermaid图表--流程图

敲厉害的燕宝的博客

07-25

2517

然而，<div>是一个块级元素，它默认不会保留空白字符和换行。这意味着当你在<div>中输入Mermaid语法时，所有的空格和换行会被浏览器忽略，从而破坏了Mermaid语法的结构，导致Mermaid无法正确解析和渲染图表。Mermaid未正确初始化：确保在你的Vue组件的mounted钩子中正确调用了Mermaid的初始化函数。<pre>标签和<div>标签在处理文本和布局上有着本质的区别，这可能是你遇到Mermaid在<div>中不起作用的原因之一。首先，你需要在你的项目中安装Mermaid。

在md-editor-v3中实现Mermaid图表本地化引入方案

gitblog_07529的博客

06-25

328

在md-editor-v3中实现Mermaid图表本地化引入方案背景介绍 md-editor-v3是一个基于Vue3的Markdown编辑器组件，它支持通过Mermaid库来渲染流程图、时序图等图表。默认情况下，编辑器会从CDN动态加载Mermaid库，但在某些网络环境下，这种动态加载方式可能会失败，导致图表无法正常显示。问题分析当使用CDN引入Mermaid时，可能会遇到以下问题：网络...

在Hugo中优雅地使用数学公式

白马湖水怪的博客

09-12

1302

在2021年4月之前，我使用 Hexo 静态博客，也曾经因为 Hexo 默认的 Markdown 渲染引擎不能很好地渲染checkbox而头疼。现在，切换到 Hugo 以后，有一次遇到了数学公式渲染的问题。关于 Hugo 默认的 Markdown 渲染引擎goldmark，在官方文档1中可以看到： markup: asciidocExt: attributes: {} backend: html5 extensions: [] failureLevel: fatal noHeaderOrFooter: t

如何使用hugo搭建个人博客（二）：修改主题：颜色，字体，布局

stepup

06-09

1万+

上一篇博文中谈到了如何在本地使用hugo预览特定主题crisp，本文介绍主题的颜色，字体，布局的修改。修改主题侧边栏颜色crisp主题的侧边栏默认是白色，如果想改个颜色咋办？到github仓库 https://github.com/penn201500/hugo-crisp-theme-for-blog/ 获取 hugo-crisp-theme-for-blog/mysite/themes/cris