prev = page.prevnext = page.nextdateConf = theme.post.dateupdatedConf = theme.post.updatedsourceConf = theme.post.sourceexcerptConf = theme.post.excerptreward = theme.post.rewardencrypted = page.encrypt || page.passwordtocContent = encrypted === undefined ? toc(page.content, theme.toc) : toc(page.origin, theme.toc)countWord = theme.post.word_count === true ? wordcount(page.content) : nullcountTime = theme.post.reading_time === true ? min2read(page.content) : null

图表示例

主题通过 mermaid-js（GitHub）绘制各种图表。

支持：

关于写作那些事之快速上手 Mermaid 流程图

流程图

graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
<div class="mermaid"> graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] </div>

序列图

sequenceDiagram autonumber Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
<div class="mermaid"> sequenceDiagram autonumber Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! </div>

类图

classDiagram classA --|> classB : Inheritance classC --* classD : Composition classE --o classF : Aggregation classG --> classH : Association classI -- classJ : Link(Solid) classK ..> classL : Dependency classM ..|> classN : Realization classO .. classP : Link(Dashed)
<div class="mermaid"> classDiagram classA --|> classB : Inheritance classC --* classD : Composition classE --o classF : Aggregation classG --> classH : Association classI -- classJ : Link(Solid) classK ..> classL : Dependency classM ..|> classN : Realization classO .. classP : Link(Dashed) </div>

状态图

stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left.
<div class="mermaid"> stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. </div>

实体关系图

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
<div class="mermaid"> erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses </div>

用户旅程图

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me
<div class="mermaid"> journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me </div>

甘特图

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
HTML 共 11 行 展开 
1
2
3
4
5
6
7
8
9
10
11
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
</div>

指令图

%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% sequenceDiagram %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%% Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice
<div class="mermaid"> %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% sequenceDiagram %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%% Alice->>Bob: Hi Bob Bob->>Alice: Hi Alice </div>

饼图

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5
<div class="mermaid"> pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 </div>