marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-20 12:44:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Initial implementation for Issue#2249.

Browse Source 
Includes changes to sequence diagram code to enable popup menus and individualized styling of actors
Includes unit and e2e tests.
Includes updates to the md file for sequencediagrams.
This commit is contained in:
eajenkins
2021-08-27 10:56:56 -07:00
parent 2fd7992b0e
commit 291bec7e90
10 changed files with 590 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/sequenceDiagram.md
View File

@@ -406,6 +406,58 @@ sequenceDiagram
Bob-->>John: Jolly good!
```
## Actor Menus
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
This can be configured by adding the links lines with the format:
links <actor>: <json-formatted link-name link-url pairs>
An example is below:
```
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
## Actor Individualized Styles & Icons
Actors can have individualized styling including an embedded icon.
This can be configured by adding the properties lines with this format:
properties <actor>: { "class": "<css className>", "icon": @<built-in-icon-name> -or- <url to an image file>
>
```
sequenceDiagram
participant Alice
participant John
properties Alice: {"class": "scheduled-job-actor", "icon": "@clock"}
properties John: {"class": "database-service-actor", "icon": "https://icons.contoso.com/database.svg"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
```mermaid
sequenceDiagram
participant Alice
participant John
properties Alice: {"icon": "@clock"}
properties John: {"icon": "@database"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
Built-in icon names include @clock, @database, @computer.
## Styling
Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss