marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-03 23:56:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs: add documentation

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
omkarht
2025-08-14 12:58:24 +05:30
parent 41e3d2449a
commit 6b64b92b6e
2 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/syntax/sequenceDiagram.md
View File

@@ -194,6 +194,46 @@ sequenceDiagram
Bob->>Alice: Queue response Bob->>Alice: Queue response
``` ```
### Icon
If you want to use a custom icon for a participant, use the JSON configuration syntax as shown below. The `icon` value can be a FontAwesome icon name, emoji, or other supported icon identifier.
```mermaid-example
sequenceDiagram
participant Alice@{ "type" : "icon", "icon": "fa:bell" }
participant Bob
Alice->>Bob: Icon participant
Bob->>Alice: Response to icon
```
```mermaid
sequenceDiagram
participant Alice@{ "type" : "icon", "icon": "fa:bell" }
participant Bob
Alice->>Bob: Icon participant
Bob->>Alice: Response to icon
```
### Image
If you want to use a custom image for a participant, use the JSON configuration syntax as shown below. The `image` value should be a valid image URL.
```mermaid-example
sequenceDiagram
participant Alice@{ "type" : "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
participant Bob
Alice->>Bob: Image participant
Bob->>Alice: Response to image
```
```mermaid
sequenceDiagram
participant Alice@{ "type" : "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
participant Bob
Alice->>Bob: Image participant
Bob->>Alice: Response to image
```
### Aliases ### Aliases
The actor can have a convenient identifier and a descriptive label. The actor can have a convenient identifier and a descriptive label.

24
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@@ -118,6 +118,30 @@ sequenceDiagram
Bob->>Alice: Queue response Bob->>Alice: Queue response
``` ```
### Icon
If you want to use a custom icon for a participant, use the JSON configuration syntax as shown below. The `icon` value can be a FontAwesome icon name, emoji, or other supported icon identifier.
```mermaid-example
sequenceDiagram
participant Alice@{ "type" : "icon", "icon": "fa:bell" }
participant Bob
Alice->>Bob: Icon participant
Bob->>Alice: Response to icon
```
### Image
If you want to use a custom image for a participant, use the JSON configuration syntax as shown below. The `image` value should be a valid image URL.
```mermaid-example
sequenceDiagram
participant Alice@{ "type" : "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
participant Bob
Alice->>Bob: Image participant
Bob->>Alice: Response to image
```
### Aliases ### Aliases
The actor can have a convenient identifier and a descriptive label. The actor can have a convenient identifier and a descriptive label.