Markdown画图神器Mermaid

发表于 更新于 分类于
突然发现可以在markdown中画图，也可以将其配置到Hexo博客中，包括饼状图、流程图、序列图、甘特图、类图、状态图等，感觉很牛逼。

1. 前言

  • 碎碎念:握草，刚刚发现markdown里面居然可以画图，我刚才想让chatgpt给我花流程图，他给我发了一串什么的代码，之前也是发，但我没注意，这次看了后无意见贴到了Typora中，发现居然是图形，太酷了。
  • Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用 Markdown 启发的文本定义和渲染器来创建和修改复杂的图表。[Mermaid中文官网](关于 Mermaid | Mermaid 中文网 (nodejs.cn))
  • Mermaid用法我还不太会

2. Hexo中Next主题配置Mermaid

升级Hexo到V6.x, 升级NexT版本到V8.11.0后，无需通过安装插件使用，只需修改NexT配置文件，修改Hexo配置文件即可。

参考链接

  • 步骤一：修改next主题配置文件_config.xml，只需mermaid的值由false -> true即可

    1
    2
    3
    4
    5
    6
    7
    # Mermaid tag
    mermaid:
      enable: true
      # Available themes: default | dark | forest | neutral
      theme:
        light: default
        dark: dark

  • 步骤二：修改hexo的配置文件_config.xml，找到highlight，手动添加内容

    1
    2
    3
    highlight:
      exclude_languages:
        - mermaid

  • 步骤三：执行hexo cl和hexo g命令行重新生成页面即可。

3. Mermaid画图效果演示

[简单教程（非官方）](Mermaid从入门到入土——Markdown进阶语法 - 知乎 (zhihu.com))

  • 朱元璋家谱简图，圆圈代表皇帝

    graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六


朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3

  • 饼状图

    pie
    title 为什么总是宅在家里？
    "喜欢宅" : 15
    "天气太热或太冷" : 20
    "穷" : 500

  • 流程图

    graph LR
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];