Html Mermaid Dokka plugin
| Mermaid-Dokka | MermaidJS |
|---|---|
| 0.2.2 | 8.14.0 |
| 0.3.0 | 9.0.0 |
Step 1: install
dependencies {
dokkaPlugin("com.glureau:html-mermaid-dokka-plugin:0.3.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 ->
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
17 Dec 11, 2022
91 Jan 2, 2023
3 Jan 7, 2023
57 Dec 17, 2022
5 Mar 9, 2022
64 Dec 16, 2022
10 Aug 17, 2022
2k Dec 21, 2022
10 Aug 3, 2022
0 May 17, 2022