Using Mermaid in hexo

发表于 更新于 分类于 阅读次数： 本文字数： 473 阅读时长 ≈ 1 分钟

Mermaid是用文本来描述Diagram，因为博客使用了hexo和Next，所以尝试在把Mermaid用起来，可以编写一些代码流程；

  1. Install Mermaid: $ npm install hexo-filter-mermaid-diagrams
  2. Modify Next config, like _config.next.yml，把mermaid打开。 
    1
    2
    3
    4
    5
    6
    7
    # Mermaid tag
    mermaid:
      enable: true
      # Available themes: default | dark | forest | neutral
      theme:
        light: default
        dark: dark
  3. Modify hexo config, _confg.yml: 
    1
    2
    3
    highlight:
      exclude_languages:
        - mermaid
  4. Start to create diagram using Mermaid syntax, like
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]