如何在Markdown中配置Mermaid甘特图参数及适配VSCode预览插件

一、Markdown内直接配置Mermaid参数 #

Mermaid支持通过%%{init: ...}%%语法在代码块开头直接注入全局配置，针对甘特图的Section宽度，除了你尝试的leftPadding（控制左侧整体留白），还可以使用sectionWidth参数直接定义Section列的宽度。

示例代码：

%%{init: { 
  ganttConfig: {
    'leftPadding': '100',
    'sectionWidth': '200'  // 自定义Section列的宽度
  } 
} }%%
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    tickInterval 1day

    section A task
        a1          :a1, 2014-01-01, 30d
    section Another Task
        a2    :after a1, 20d
    section Task in Another
        a3 :2014-01-12, 12d
    section yet another task
        a4    :24d

• leftPadding：调整图表左侧的整体留白空间，避免Section文字被截断
• sectionWidth：直接设置Section列的固定宽度，数值支持像素单位（无需写px）

二、VSCode插件的全局配置（若内联init不生效） #

如果Markdown内的内联配置未被"Markdown Preview Mermaid"插件识别，可以通过VSCode全局设置配置：

1. 打开VSCode，按下Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板
2. 在搜索框输入Markdown Preview Mermaid，找到插件的配置项
3. 找到Mermaid: Init选项，点击编辑 in settings.json
4. 在settings.json中添加甘特图的全局配置：

"markdown-preview-mermaid.mermaidInit": {
  "ganttConfig": {
    "leftPadding": "100",
    "sectionWidth": "200"
  }
}

保存设置后，重启Markdown预览即可生效。

内容的提问来源于stack exchange，提问作者Be Kind To New Users