Dhgms.DocFx.MermaidJs.Plugin 1.0.101

dotnet add package Dhgms.DocFx.MermaidJs.Plugin --version 1.0.101
NuGet\Install-Package Dhgms.DocFx.MermaidJs.Plugin -Version 1.0.101
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Dhgms.DocFx.MermaidJs.Plugin" Version="1.0.101">
  <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Dhgms.DocFx.MermaidJs.Plugin --version 1.0.101
#r "nuget: Dhgms.DocFx.MermaidJs.Plugin, 1.0.101"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Dhgms.DocFx.MermaidJs.Plugin as a Cake Addin
#addin nuget:?package=Dhgms.DocFx.MermaidJs.Plugin&version=1.0.101

// Install Dhgms.DocFx.MermaidJs.Plugin as a Cake Tool
#tool nuget:?package=Dhgms.DocFx.MermaidJs.Plugin&version=1.0.101

DocFx MermaidJS

Mission Statement

To provide a plugin to convert MermaidJS notations to diagrams during the build of a DocFX project.


This DocFX MermaidJS plugin is a wrapper around the mermaid-cli NPM package. It is aimed at doing build time generation of the mermaid diagram so:

  • The syntax can be validated at build time.
  • The image is only built once.
  • The image can be embedded in a pdf.


Getting Started


You will need:

  • NodeJS
  • NPM
  • A docfx project

The instructions below assume the DocFX project is called "docfx_project"

Setting up NodeJS

In your docfx project folder create a package.json file with content similar to:

    "name": "docfx",
    "version": "1.0.0",
    "devDependencies": {
        "@mermaid-js/mermaid-cli": "9.2.2"

Script and\or carry out a package restore using the following command

pushd docfx_project && npm install && popd

Setting up DocFX

Add a nuget package reference to "Dhgms.DocFX.Mermaid.Plugin" in your docfx_project

Update your docfx.json to include the template. This assumes you are using the default templates for the process. You need to put this plugin BEFORE your output template.

For HTML output:

    "build": {
        "template": [

For PDF output:

    "pdf": {
        "template": [

By default the plugin has the following behaviour:

  • Uses inline emdedding in the HTML
  • Creates png images
  • Runs the mermaid-cli externally

You can adjust the settings by viewing the detailed documentation.

Adding a diagram

In your markdown files add a code block with a mermaid descriptor like so:

graph TD;

Then you can run the build and you should see the image output in place of the mermaid markdown syntax.

graph TD;

Viewing the documentation

The documentation can be found at https://dpvreony.github.io/docfx-mermaidjs/

Contributing to the code

See the contribution guidelines.

There are no supported framework assets in this package.

Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Dhgms.DocFx.MermaidJs.Plugin:

Package Downloads

MermaidJS Plugin for DocFX

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.101 17 4/1/2023
1.0.99 22 3/31/2023
1.0.21 170 1/3/2023
1.0.19 142 1/3/2023