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
%% 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
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
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.
