You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Markdown文档中设置Mermaid图表主题?

嘿,这个问题我刚好折腾过,其实把在线编辑器里的Mermaid图表复制到Markdown后,设置主题的方法超简单,分两种情况给你说:

单个图表单独设置主题(通用方法)

不管你用的哪个在线编辑器,复制图表代码到Markdown后,只需要在Mermaid代码块的第一行加上主题初始化指令就行。比如你想设置forest主题,就加:

%%{init: {'theme': 'forest'}}%%

如果要换回default主题,就把forest改成default

给你举个完整的例子,比如一个简单的流程图:

%%{init: {'theme': 'forest'}}%%
graph TD
  A[开始] --> B{判断条件};
  B -->|是| C[执行操作];
  C --> D[结束];
  B -->|否| E[跳过操作];
  E --> D;

这种方法的好处是兼容性强,主流支持Mermaid的Markdown渲染器(比如VS Code预览、Obsidian、Stack Overflow)都能识别。

全局主题设置(部分平台支持)

如果你的Markdown编辑器/平台支持全局配置Mermaid(比如Obsidian、某些笔记软件),可以直接在软件的设置里找到Mermaid相关选项,选择defaultforest作为默认主题。不过这种方式只在特定平台生效,要是你需要跨平台使用图表,还是单个设置更稳妥。

另外要注意:有些老版本的渲染器可能不支持主题指令,要是遇到不生效的情况,先确认下你的渲染环境是否支持Mermaid的主题配置~

内容的提问来源于stack exchange,提问作者RandomCoder

火山引擎 最新活动