test mermaid

This is to test mermaid in dark theme.

The front matter is specified as:

---
mermaid: dark 
---

The syntax is used with <div>

<div class="mermaid"> 
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

You can also define the mermaid theme with the %% init

<div class="mermaid">
%%{init: {'theme':'forest', 'themeVariables': { 'lineColor': 'green' }}}%%
graph LR;
  A-->B;
</div>

<div class="mermaid">
%%{init: {'theme':'dark', 'themeVariables': { 'lineColor': 'green', 'textColor': 'yellow' }}}%%
graph LR;
  A-->B;
</div>

graph TD; A-->B; A-->C; B-->D; C-->D;

%%{init: {'theme':'forest', 'themeVariables': { 'lineColor': 'green' }}}%% graph LR; A-->B;

graph LR A(This is A)----->|this is demo text|B[(this is database

demo)] C((This is C))--this is demo text--->B D{This is D}--this is demo text--->B subgraph box A---C----D subgraph newbox C D end end subgraph box2 B end style B fill:#bbf,stroke:#000,stroke-width:4px,color:#f00,stroke-dasharray: 10 2 linkStyle 0 stroke:#f00,stroke-width:4px

flowchart LR A<==>B<-..->C A[this is a text] B[this is demo] style B fill:#bbf

%%{init: {'theme':'dark', 'themeVariables': { 'lineColor': 'green', 'textColor': 'yellow' }}}%% pie title Bugs in Software "transmission" : 15.00 "alarm" : 25 "management" : 66 "performance" : 5

%%{init: {'theme':'dark'}}%% gantt title A Gantt Diagram dateFormat YY-MM-DD axisFormat %y-%m-%d section Section 1 A task :done, a1, 21-12-01, 20d Another task :active, after a1, 60d section Section 2 B :crit,22-02-12, 20d milestone: milestone,20d

%%{init: {'theme':'dark'}}%% sequenceDiagram participant Local participant Remote Local-xRemote: LOS is detected Note right of Remote: LOS will triger RFI Remote->>Local: RFI Local->>Remote: Idle Note left of Local: RFI will stop transmission
and triggers idle Local-->>Remote: LOS clear Note right of Remote: idle is received
after LOS clear Remote->>Local: Data Local->>Remote: Data