https://github.com/xavierchanth/mermaid-pg
Mermaid Playground
https://github.com/xavierchanth/mermaid-pg
Last synced: 3 months ago
JSON representation
Mermaid Playground
- Host: GitHub
- URL: https://github.com/xavierchanth/mermaid-pg
- Owner: XavierChanth
- License: bsd-3-clause
- Created: 2023-05-01T16:37:09.000Z (about 2 years ago)
- Default Branch: trunk
- Last Pushed: 2023-05-01T16:48:30.000Z (about 2 years ago)
- Last Synced: 2025-03-06T09:01:52.932Z (4 months ago)
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mermaid-pg
Mermaid Playground
Found a customization sample for mermaid [here](https://stackoverflow.com/questions/71864287/mermaid-custom-css-scripts-in-markdown).
[start snippet]
I am in a Markdown file and I want to show you a diagram:
```mermaid
%%{
init: {
"sequence": {
"actorFontFamily": "monospace",
"actorFontWeight": "bold",
"messageFontFamily": "monospace",
"messageFontWeight": "bold",
"noteFontWeight": "bolder"
}
}
}%%
sequenceDiagram
participant Browser
participant AppServer
rect rgb(255, 255, 255, 0.05)
note over Browser, AppServer: (Phase 1) Authentication Check
Browser ->> AppServer: GET /admin { Cookie: }
Browser ->> Browser: useSession
end
end
```
[end snippet]
Leads to an error, let's try one of the [examples](https://mermaid.js.org/syntax/sequenceDiagram.html) from the docs:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
GitHub doesn't state where the error in the first diagram is... let's start by trying to add an init.
```mermaid
%%{
init: {
"sequence": {
"actorFontFamily": "monospace",
"actorFontWeight": "bold",
"messageFontFamily": "monospace",
"messageFontWeight": "bold",
"noteFontWeight": "bolder"
}
}
}%%
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
Nice, the font is bolded! The next question is how custom can we get with mermaid?
Doesn't look like I can animate in GitHub... which was the main goal for this experiment, time to look for other solutions.
Note [this observable notebook](https://observablehq.com/@tomlarkworthy/animated-sequence-diagrams) if your solution is able to modify the diagram with javascript.