`mermaid-cli` 生成高分辨率 Mermaid 流程图(可以下载安装Typora更好 )的操作指南

以下是使用 mermaid-cli 生成高分辨率 Mermaid 流程图(可以下载安装Typora更好 )的操作指南

一、安装依赖(需管理员权限)

  1. 安装 Node.js v16+
    • 官网下载:Node.js 官方下载

验证安装成功:

复制代码
node -v  # 应显示 v16.x 或更高
npm -v   # 应显示 8.x 或更高

安装 mermaid-cli 工具

复制代码
npm install -g @mermaid-js/mermaid-cli

安装后验证:

复制代码
mmdc --version  # 成功安装会显示版本号(如 10.0.0+)

二、生成高清流程图

  1. 准备 Mermaid 代码文件

    • 创建文本文件 flowchart.mmd(文件名可自定义,后缀名为mmd)
    • 写入 Mermaid 代码,注意一定是纯文本形式的,建议把代码先粘贴到文本文件,然后再复制过来
  2. 加入要转换的markdown文件的文件夹

    win+cmd,进入终端管理员(避免权限问题)

    接着:

    复制代码
    D:
    cd QQ文件
    分别执行以上两步,进入文件所在的文件夹,文件夹路径可以根据具体实际进行调整

    最后输入转换代码

    复制代码
    mmdc -i diagram.mmd -o flowchart.png -w 5000 -H 3000
    
    mmdc -i diagram.mmd -o flowchart.png -w 5000 -H 3000
    输出文件格式支持pdf、svg、png,输出和输入文件名可以根据实际进行调整
    输出的图片宽度和高度也可以进行相应的调整

    关键参数说明

    参数 作用 建议值
    -i 输入文件 .mmd 文件路径
    -o 输出文件 .png.svg
    -w 图片宽度 ≥3000(避免模糊)
    -H 图片高度 按流程图复杂度调整
    -t 主题(可选) default/forest/dark
    -b 背景色(可选) transparent(透明背景)
相关推荐
xiami_world4 天前
2026年团队AI工具栈架构指南:ChatGPT + Codex + AI白板智能体工程化落地方案
人工智能·ai·信息可视化·aigc·流程图
He BianGu4 天前
【项目】WPF VisionMaster 4.0 项目介绍和开发文档
c#·wpf·流程图·开发文档·机器视觉·visionmaster
ProcessOn官方账号6 天前
PRISMA流程图:系统综述与荟萃分析的核心工具
流程图·prisma流程图·系统综述·荟萃分析
枳实-叶9 天前
【Linux驱动开发】第7天:总线-设备-驱动三大核心模型:通俗讲解+完整流程图
linux·驱动开发·流程图
eastyuxiao16 天前
思维导图拆解项目范围 3 个真实落地案例
大数据·运维·人工智能·流程图
T畅N16 天前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
eastyuxiao16 天前
如何用思维导图拆解项目范围
大数据·人工智能·流程图
eastyuxiao17 天前
流程图 + 配置清单 落地应用于团队 / 公司日常文档处理场景
人工智能·流程图
eastyuxiao17 天前
OpenClaw 自动处理流程图 + 配置清单 可应用场景
人工智能·流程图
RuoyiOffice17 天前
2026 年开源 BPM/工作流引擎大盘点:Flowable vs Camunda vs Activiti vs Turbo——谁才是企业级首选?
java·spring boot·后端·开源·流程图·ruoyi·anti-design-vue