Initial work -> Onewe/hexo-filter-mermaid-diagrams.
Using either NPM
or Yarn
npm install --save TheBeachMaster/hexo-filter-mermaid
yarn add TheBeachMaster/hexo-filter-mermaid
In your root _config.yml
add this
# mermaid chart
mermaid:
enable: true # default
options:
startOnload: true
theme: dark
More options
here
Note about themes: selection {default
, forest
, dark
, neutral
}. You can only have one (for now)
```mermaid
graph LR
subgraph Continuous Integration
delbuild[Build]-.-> deltest[Test]
depbuild[Build]-.-> deptest[Test]
end
subgraph Continuous Delivery
deltest-.->delaccept[Acceptance Test]
delaccept-.->delstage[Deploy to Staging]
delstage-->delprod[Deploy to Production]
delprod-->delsmoketest[Smoke Test]
end
subgraph Continuos Deployment
deptest-.->depaccept[Acceptance Test]
depaccept-.->depstage[Deploy to Staging]
depstage-.->depprod[Deploy to Production]
depprod-.->depsmoketest[Smoke Test]
end ```
For more demos see Mermaid API demos
If you run into rendering issues, use Hexo's raw
tag like so
{% raw %}
```mermaid
graph LR
subgraph Continuous Integration
delbuild[Build]-.-> deltest[Test]
depbuild[Build]-.-> deptest[Test]
end
subgraph Continuous Delivery
deltest-.->delaccept[Acceptance Test]
delaccept-.->delstage[Deploy to Staging]
delstage-->delprod[Deploy to Production]
delprod-->delsmoketest[Smoke Test]
end
subgraph Continuos Deployment
deptest-.->depaccept[Acceptance Test]
depaccept-.->depstage[Deploy to Staging]
depstage-.->depprod[Deploy to Production]
depprod-.->depsmoketest[Smoke Test]
end```
{% endraw %}
Note that in the above examples end
tag should be proceeded by a new line then ``` ...