vscode-mermaid-syntax-highlight

Syntax support for the Mermaid charting language

Supports both fenced markdown (see screenshots), and mmd files.

Screenshots/Progress

Graph

graph TB %% comments
  %% Entity[Text]
  ID-1[Node 1]
  ID-2>Node 2]
  ID-3(Node 3 <br> text)
  %% Entity--Entity
  ID-1---ID-2
  ID-1 --> ID-3
  %% Entity--Text--Entity
  ID-2--Link between 2 and 3---ID-3
  ID-3-->|Action from 3 to 1|ID-1
  ID-3 -- "Action from 3 to 2. p/w: '_-!#$%^&*+=?,\'" --> ID-2
  ID-4 
  %% Complex cases
  A[Hard edge] -->|Link text| B(Round edge)
  ID-1---ID-2(Text)
  B --> C{Text}
  C -->|One| D[Text]
  A(A) --> B(B)
  C[/C/] --> D>D]
  %% class/classDef
  classDef blue fill:#08f,stroke:#fff;
  class ID-1 blue
  class ID-1,ID-2 red
  %% click
  click ID-1 "https://github.com" "Tooltip text" %% comments
  click ID-2 alert "Tooltip for a callback"
  %% subgraph
  subgraph A subgraph
    ID-4{Node 4}
    ID-5((fa:fa-spinner))
    ID-6["Node 6 (same #quot;shape#quot;)"]
    ID-4-.->ID-5
    ID-5 -. Action from 5 to 4 .-> ID-4
    ID-5==>ID-6
    ID-6 == Action from 6 to 5 ==> ID-5
  end

Progress

[x] Keywords
[x] %% Comments
[x] Entity---Entity (livne )
[x] Entity---Text---Entity
[x] Entity-->|Text|Entity
[x] Entity-->|Special Chars|Entity
[x] Entity[Text]
[x] classDef
[x] class
[x] click

Sequence

sequenceDiagram %% diagram
  autonumber
  %% participant
  participant Alice
  participant B as Bob<br>Newline
  participant C as Carol
  %% arrows
  B->C: Solid line without arrow
  B-->C: Dotted line without arrow
  B->>C:Solid line with arrowhead
  B-->>C: Dotted line with arrowhead
  B-)C: Solid line with Async arrow
  B--)C: Dotted line with Async arrow
  B-xC: Solid line with a cross at end
  B--xC: Dotted line with a cross at end
  %% activation, shorthand
  activate Alice
  B->>+C: Arrow with + that activates Carol
  C->>-B: Arrow with - that deactivates Carol
  deactivate Alice
  %% notes
  Note left of Alice: Alice likes to chat
  Note over B,C: Bob whispers when sick
  %% loop
  loop Every minute
    B-->C: Can you hear me?
  end
  %% alt
  alt is sick
    B-->C: Not so good :(
  else is well
    B->C: Feeling fresh like a daisy
  end
  opt Extra response
    B->C: You, Carol?
  end
  %% par
  par Action 1
    B-->C: I'm good
  and Action 2
    B->>C: I'm better now
  end
  rect rgba(128, 128, 128, 0.5)
    B->>C: So colourful!
  end

[x] Keywords
[x] %% Comments
[x] participant Actor
[x] participant Aliases
[x] Actor->>Actor: Message
[x] 8 arrow types
[x] (de)activate Actor
[x] activate/deactivate shorthand (+/-)
[x] Note Action Actor
[x] Multi-actor notes
[x] loop
[x] alt
[x] alt optional
[x] rect
[x] par
[x] autonumber

Gantt

gantt %%comment
  dateFormat  YYYY-MM-DD
  axisFormat  %m/%d/%Y
  title Adding GANTT diagram functionality to mermaid
  section A section %%comment
  Completed task            :done,    des1, 2014-01-06,2014-01-08
  Active task               :active,  des2, 2014-01-09, 3d
  Future task               :         des3, after des2, 5d %%comment
  Future task2               :         des4, after des3, 5d
  A task           :a1, 2014-01-01, 30d
  section Critical tasks
  Completed task in the critical line :crit, done, 2014-01-06,24h
  Implement parser and jison          :crit, done, after des1, 2d
  Create tests for parser             :crit, active, 3d
  Future task in critical line        :crit, 5d
  Create tests for renderer           :2d
  Add to mermaid                      :1d

[x] Keywords
[x] %% Comments
[x] dateFormat
[x] axisFormat
[x] title
[x] section
[x] task

Pie

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

[x] Title
[x] Data Sets

Class Diagram

classDiagram
  Animal <|-- Duck : LabelText
  class1 --o other
  Animal --o Fish
  Animal : +int age
  Animal : +String gender
  Animal: mate()
  Animal : #method(param)* return
  class Duck{
      %% Class Members
      +String beakColor
      #quack()
  }
  class Fish{
      -abstractMethod()*
      staticMethod()$
  }
  %% Class member generics
  class Square~Shape~{
      List~int~ position
      setPoints(List~int~ points)
      getPoints() List~int~
  }
  Square : -List~string~ messages
  Square : ~setMessages(List~string~ messages)
  Square : +getMessages() List~string~

  %% Multiplicity relations
  Customer "1" --> "*" Ticket
  Student "1" --> "1..*" Course
  Galaxy --> "6" Star : Contains

  %% Annotations
  class Annotate1
  <<interface>> Animal

  class Annotate2{
    <<Service>>
  }

Progress

[x] %% Comments
[x] Class
[x] Class members
[x] Class member visibility
[x] Class members generics
[x] Class relationships
[x] Annotations

State Diagram

stateDiagram %%comment
  s1
  state "Description with parenthesis" as s2
  s3 : Description with colon

  s1 --> s2
  s2 --> s3: Colon transition
  [*] --> s1 : Transition text
  s3 --> [*]

  state NestedComposite {
      [*] --> Nested

      state Nested {
          [*] --> second
      }
  }

  %% comment here
  state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2

      state join_state <<join>>
      State2 --> join_state

  note right of State1
    Important information! You can write
    notes.
  end note
  note left of State2 : This is the note to the left.

  %% concurrency
  state Active {
      [*] --> NumLockOff
      NumLockOff --> NumLockOn : EvNumLockPressed
      NumLockOn --> NumLockOff : EvNumLockPressed
      --
      [*] --> CapsLockOff
      CapsLockOff --> CapsLockOn : EvCapsLockPressed
      CapsLockOn --> CapsLockOff : EvCapsLockPressed
  }

Progress

[x] States with description
[x] Transition with text
[x] Composite states
[x] Forks
[x] Notes
[x] Concurrency
[x] Comments

Entity Relationship Diagrams

erDiagram %% comment
    %% entities
    ANOTHER-ENTITY1
    attribute-entity {
      string name
      int number
      foo another-attribute "attribute comment"
      guid foreign-key FK "comment special characters '_-!#$%^&*+=?,\'"
      guid primary-key PK ""
    }
    %% relationships
    ANOTHER-ENTITY1 |o..o| ORDER : zero-or-one
    ANOTHER-ENTITY1 ||--|| ORDER : exactly-one
    ANOTHER-ENTITY1 }o--o{ ORDER : zero-or-more
    ANOTHER-ENTITY1 }|..|{ ORDER : one-or-more
    ANOTHER-ENTITY1 }|..|{ OTHER : ""
    ANOTHER-ENTITY1 }|..|{ OTHER : "multiple words"

Progress

[x] Entities
[x] Comments
[x] Entity Attributes (and keys/comments)
[x] Relationships (and labels)

ADO Support

Supports highlighting in Azure Dev Ops (ADO) colon syntax:

::: mermaid graph LR A --> B :::

Initial Idea

Based on the starter language support repo here, and initially created based on the Atom language support here.

TODO

[x] Graph support
[x] Sequence Diagram support
[x] Gantt support
[x] Support highlighting in mmd files.
[x] Class Diagram support

Building

The grammars for each diagram type reside in syntaxes/diagrams in separate files.

To test changes locally:

Build the theme and create the vsix package by running:

npm install
vsce package

Install the theme locally by using the Install from VSIX command. This may require reloading VS Code to see the changes.

Developing

The grammar includes a custom yaml type regex. This should be used for all but the simplest regex expressions. It was created to allow the regex to be multiline (with no whitespace between lines) and in-line comments that are stripped from the json. To use it, prepend !regex as seen below:

reg: !regex |-
  # Comment
  \s*(class)\s+ # explanation
  (\b[-,\w]+)\s+ # comment

Becomes:

{
  "reg": "\\s*(class)\\s+(\\b[-,\\w]+)\\s+"
}

Instead of:

{
  "reg": "# Comment\n\\s*(class)\\s+ # explanation\n(\\b[-,\\w]+)\\s+ # comment"
}

This is useful for splitting out sections of the regex (such as capture groups) and commenting on what each group should be matching.

Mermaid Markdown Syntax Highlighting

Brian Pruitt-Goddard

vscode-mermaid-syntax-highlight

Screenshots/Progress

Graph

Progress

Sequence

Gantt

Pie

Class Diagram

Progress

State Diagram

Progress

Entity Relationship Diagrams

Progress

ADO Support

Initial Idea

TODO

Building

Developing