• 百 度
  • 京 东
  • 淘 宝
  • 知 乎
  • Bing
  • Google
  • Yandex
  • Quora
  • GitHub
  • StackOverflow
  • SegmentFault
  • 医 疗

3-hexo支持mermaid图表

  1. 一、说明
    1. 开启
  2. 二、示例
    1. 1. flowchart
    2. 2.Sequence diagrams
    3. 3.Class diagrams
    4. 4.State diagrams
    5. 5.Gantt diagrams
    6. 6.Pie chart diagrams

这是 3-hexo 说明文件,转载自 叶落阁:https://yelog.org/2019/11/12/3-hexo-support-mermaid/

一、说明

开启

1.安装 hexo 插件

npm install hexo-filter-mermaid-diagrams
2.修改 themes/3-hexo/_config.ymlmermaid.on ,开启主题支持

# Mermaid 支持
mermaid:
on: true
cdn: [email protected]/dist/mermaid.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js
options: # 更多配置信息可以参考 https://mermaidjs.github.io/#/mermaidAPI
 theme: 'default'
 startOnLoad: true
 flowchart:
   useMaxWidth: false
   htmlLabels: true

3.在markdown中,像写代码块一样写图表

二、示例

以下示例源码可以在这边查看 本文源码
更多示例可以查看官网:https://mermaidjs.github.io

1. flowchart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

2.Sequence diagrams

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

3.Class diagrams

classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
     Animal : +String gender
     Animal: +isMammal()
     Animal: +mate()
     class Duck{
         +String beakColor
         +swim()
         +quack()
     }
     class Fish{
         -int sizeInFeet
         -canEat()
     }
     class Zebra{
         +bool is_wild
         +run()
     }

4.State diagrams

stateDiagram
       [*] --> Active

       state Active {
           [*] --> NumLockOff
           NumLockOff --> NumLockOn : EvNumLockPressed
           NumLockOn --> NumLockOff : EvNumLockPressed
           --
           [*] --> CapsLockOff
           CapsLockOff --> CapsLockOn : EvCapsLockPressed
           CapsLockOn --> CapsLockOff : EvCapsLockPressed
           --
           [*] --> ScrollLockOff
           ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
           ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
       }

5.Gantt diagrams

gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

6.Pie chart diagrams

pie
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15


转载请注明来源。

文章标题:3-hexo支持mermaid图表

本文作者:bas369.com

发布时间:2020-07-03, 15:14:00

最后更新:2020-07-05, 19:39:37

原始链接:https://www.bas369.com/more/learning_notes/2020/07/03/3-hexo%E6%94%AF%E6%8C%81mermaid%E5%9B%BE%E8%A1%A8/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


  • 关于我们
  • 苏公网安备 32132302010228号
  • 联系我们
目录