VScode在 Markdown 编辑器中预览

1. 使用在线 Mermaid 编辑器

• 步骤：
  1. 打开 Mermaid Live Editor。
  2. 将你 .md 文件中的 Mermaid 代码（从 mermaid 到结束的代码块）复制粘贴到编辑器的左侧输入框。
  3. 编辑器会自动在右侧生成可视化的 ER 图。
  4. 你可以点击右上角的下载按钮，选择合适的格式（如 PNG、SVG 等）保存生成的 ER 图。

2. 在 Markdown 编辑器中预览

• 如果你使用的 Markdown 编辑器支持 Mermaid 渲染（如 VS Code 安装 Markdown Preview Mermaid Support 扩展），可以直接在编辑器中预览 ER 图。
• 步骤：
  1. 打开 VS Code 并安装 Markdown Preview Mermaid Support 扩展。
  2. 打开包含 Mermaid 代码的 .md 文件。
  3. 点击编辑器右上角的 “Open Preview to the Side” 按钮，即可在预览窗口中看到渲染后的 ER 图。

3. 使用命令行工具

• 如果你想在命令行中生成 ER 图，可以使用 mermaid-cli。
• 步骤：
  1. 安装 mermaid-cli：

npm install -g @mermaid-js/mermaid-cli

1. 创建一个新的 .mmd 文件，将 Mermaid 代码复制到该文件中。
2. 使用以下命令生成 ER 图：

mmdc -i your_file.mmd -o output.png

如果仍然出现相同错误，请尝试使用完整路径运行：

npx @mermaid-js/mermaid-cli -i 康乐之家流程图.md -o output.png

其中，your_file.mmd 是包含 Mermaid 代码的文件，output.png 是生成的 ER 图文件名。

通过以上方法，你可以将 .md 文件中的 Mermaid 代码转换为可视化的 ER 图。