dokka-mermaid icon indicating copy to clipboard operation
dokka-mermaid copied to clipboard

Dokka plugin to render Mermaid graphics, from your code comments to your Dokka documentation.

Html Mermaid Dokka plugin

Mermaid-Dokka MermaidJS
0.2.2 8.14.0
0.3.0 9.0.0
0.3.1 9.1.0
0.3.2 9.1.2

Step 1: install

dependencies {
  dokkaPlugin("com.glureau:html-mermaid-dokka-plugin:0.3.2")
}

Step 2: write Mermaid graphs

You can write them on markdown files for modules/packages or directly from any comment in your code.

    /**
     * See the graph for more details:
     * ```mermaid
     * graph LR
     *   A[Christmas] -->|Get money| B(Go shopping)
     *   B --> C{Let me think}
     *   C -->|One| D[Laptop]
     *   C -->|Two| E[iPhone]
     *   C -->|Three| F[fa:fa-car Car]
     * ```
     * another one
     * ```mermaid
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
    * ```
    */
class CompositeSubscription

Step 3: enjoy your Dokka documentation

./gradlew dokkaHtml or ./gradlew dokkaHtmlMultiModule ->

img.png

Theming & customization

By default, the Mermaid themes used are default and dark, but you can override themes globally with:

tasks.dokkaHtmlMultiModule {
    pluginsMapConfiguration.set(
        mapOf(
            "com.glureau.HtmlMermaidDokkaPlugin" to """
                {
                    "lightTheme": "forest",
                    "darkTheme": "dark"
                }
            """.trimIndent()
        )
    )
}

You can also specify the theme for each graph, with the %%{init: ...}%% block (documentation).

For example with %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#DD0000'}}}%%

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#DD0000'}}}%%
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  B --> G[/Another/]
  C ==>|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
  subgraph section
    C
    D
    E
    F
    G
  end