Plugins

Plugins

For uses plugins, you should enable docinfo and create file docinfo-footer.html

:docinfo: shared
docinfo-footer.html
<script src="./../javascripts/reveal.js/plugin/mermaid/mermaid.js"></script>
<script src="./../javascripts/reveal.js/plugin/copycode/copycode.js"></script>
<script>
    Reveal.configure({
        // mermaid: {},
        // copycode: {},
    })
    Reveal.registerPlugin(RevealMermaid)
    Reveal.registerPlugin(CopyCode)
</script>

Diagram

Diagram

We use mermaid engine to render diagrams, charts, etc.

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

Diagram: pie chart

%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
[.mermaid]
....
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
....

Diagram: sequence

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Great!
[.mermaid]
....
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Great!
....

Diagram: graph

graph LR
    s([Source]) --> a[[aquamarine]]
    r[[rustdoc]] --> f([Docs w/ Mermaid!])
    subgraph rustc[Rust Compiler]
    a -. inject mermaid.js .-> r
    end
[.mermaid]
....
graph LR
    s([Source]) --> a[[aquamarine]]
    r[[rustdoc]] --> f([Docs w/ Mermaid!])
    subgraph rustc[Rust Compiler]
    a -. inject mermaid.js .-> r
    end
....

Diagram: git graph

---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
[.mermaid]
....
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
....