PmSyntax-MermaidJS

This is one possible way to configure $CustomSyntax (Cookbook:CustomSyntax) for Cookbook:MermaidJs.

Note, the full recipe is not included here, only the $CustomSyntax configuration is enabled.

$CustomSyntax

SDVA($CustomSyntax, array(
  'Mermaid,1' => "<ws0   =directive>=meta_nobg>=meta_nobg>=comment>attr>punct>keyword>keyword>*attr
  /(\(:mermaid)(.*?)(:\))([\s\S]*?)(\(:mermaidend:\))/g
  /(%%|\|)(.*?)(\\1)/g
  /^( *(?:style|title|dateFormat|exludes|axisFormat) )(.*)/mg
  /(%%)(.*)$/mg
  /\\bfa:fa-[-a-z]+/g
  /[(){}[\]\/:]+/g 
  /\\b(?:(?:sub)?graph|flowchart|journey|gantt|pie|section|(?:sequence|class|state|er)Diagram|(?:de)?activate|alt|else|opt|par|and)\\b/g
  /\\b(?:classDef|participant|actor|loop|end|Note|right|left|direction|click|href|rect|link)\\b/g
  /[-=|.<>+]{2,}/g
  ",
));

Playground

(:mermaid id=dom class=petko:)
graph LR
A[Start Project] --> B{Do things<br> right or do<br> them fast?}
B --> |Right| C[Code<br>well] --> D{Are<br>you done<br>yet?}
B --> |Fast| E[Code<br>fast] --> F{Does<br>it work<br>yet?}
D --> |No| C
D --> |No, and the<br>requirements<br>have changed| G[Throw it all out<br>and start over]
F --> |No| E
F --> |Almost, but it's<br>become a mass<br>of kludges and<br>spaghetti code| G
G --> B
H((?)) --> I[Good Code]
(:mermaidend:)

(:mermaid:)
gantt
    title A Gantt Diagram
    %% this is a comment
    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
(:mermaidend:)

(:mermaid:)
sequenceDiagram
    Note right of John: Text in note
    Alice->>+John: Hello John, how are you?
    activate John
    John-->>-Alice: Great!
    deactivate John
(:mermaidend:)

(:mermaid:)
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
flowchart TB
    %% this is a comment A -- text --> B{node}
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);
    A:::someclass --> B
    classDef someclass fill:#f96;
(:mermaidend:)

(:mermaid:)
flowchart TB
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
(:mermaidend:)

(:mermaid:)
        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
(:mermaidend:)