Skip to content

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

License

Notifications You must be signed in to change notification settings

glureau/dokka-mermaid

Repository files navigation

Html Mermaid Dokka plugin

Mermaid-Dokka Dokka MermaidJS
0.2.2 1.6.0 8.14.0
0.3.0 1.6.0 9.0.0
0.3.1 1.6.0 9.1.0
0.3.2 1.6.0 9.1.2
0.3.3 1.6.0 9.1.7
0.4.0 1.7.20 9.1.7
0.4.1 1.7.20 9.2.0
0.4.2 1.7.20 9.2.2
0.4.4 1.7.20 9.3.0
0.4.5 1.7.20 9.4.0
0.4.6 1.7.20 10.2.0
0.4.8 1.7.20 10.8.0
0.5.0 1.8.20 10.8.0
0.6.0 1.9.10 10.8.0

Step 1: install

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

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
Loading

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published