Skip to content

Latest commit

 

History

History
114 lines (94 loc) · 3.76 KB

README.md

File metadata and controls

114 lines (94 loc) · 3.76 KB

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