Update C4 Diagram to new renderer #6276
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
commit: |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
sidharthv96
reviewed
Feb 20, 2025
Comment on lines
+129
to
+255
| `, | ||
| options | ||
| ); | ||
| }); | ||
|
|
||
| it(`${description}should render a simple C4 diagram with the direction BT`, () => { | ||
| imgSnapshotTest( | ||
| ` | ||
| C4Context | ||
| accTitle: C4 context demo | ||
| accDescr: Many large C4 diagrams | ||
|
|
||
| direction BT | ||
| title System Context diagram for Internet Banking System | ||
|
|
||
| Enterprise_Boundary(b0, "BankBoundary0") { | ||
| Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") | ||
|
|
||
| System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") | ||
|
|
||
| Enterprise_Boundary(b1, "BankBoundary") { | ||
| System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") | ||
| } | ||
| } | ||
|
|
||
| BiRel(customerA, SystemAA, "Uses") | ||
| Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") | ||
| Rel(SystemC, customerA, "Sends e-mails to") | ||
|
|
||
| UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") | ||
| UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") | ||
| UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") | ||
| `, | ||
| options | ||
| ); | ||
| }); | ||
|
|
||
| it(`${description}should render a simple C4 diagram with the direction LR`, () => { | ||
| imgSnapshotTest( | ||
| ` | ||
| C4Context | ||
| accTitle: C4 context demo | ||
| accDescr: Many large C4 diagrams | ||
|
|
||
| direction LR | ||
| title System Context diagram for Internet Banking System | ||
|
|
||
| Enterprise_Boundary(b0, "BankBoundary0") { | ||
| Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") | ||
|
|
||
| System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") | ||
|
|
||
| Enterprise_Boundary(b1, "BankBoundary") { | ||
| System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") | ||
| } | ||
| } | ||
|
|
||
| BiRel(customerA, SystemAA, "Uses") | ||
| Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") | ||
| Rel(SystemC, customerA, "Sends e-mails to") | ||
|
|
||
| UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") | ||
| UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") | ||
| UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") | ||
| `, | ||
| options | ||
| ); | ||
| }); | ||
|
|
||
| it(`${description}should render a simple C4 diagram with the direction RL`, () => { | ||
| imgSnapshotTest( | ||
| ` | ||
| C4Context | ||
| accTitle: C4 context demo | ||
| accDescr: Many large C4 diagrams | ||
|
|
||
| direction RL | ||
| title System Context diagram for Internet Banking System | ||
|
|
||
| Enterprise_Boundary(b0, "BankBoundary0") { | ||
| Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") | ||
|
|
||
| System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") | ||
|
|
||
| Enterprise_Boundary(b1, "BankBoundary") { | ||
| System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") | ||
| } | ||
| } | ||
|
|
||
| BiRel(customerA, SystemAA, "Uses") | ||
| Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") | ||
| Rel(SystemC, customerA, "Sends e-mails to") | ||
|
|
||
| UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") | ||
| UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") | ||
| UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") | ||
| `, | ||
| options | ||
| ); | ||
| }); |
| } | ||
| } | ||
|
|
||
| //type, from, to, label, ?techn, ?descr, ?sprite, ?tags, $link |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📑 Summary
Updates the C4 diagram to use the new way of rendering as well as other missing features.
Added Features:
Everything is documented in the updated documentation.
📏 Design Decisions
Since the diagram is originally based off of PlantUML's implementation I based the new features off that as well. While diagram feature specific, below are some design decisions that were made.
In this first version there are only two supported sprites: "person" and "database" but more can easily be added in the future.
The legend is placed at the bottom right of the diagram if shown and will show all tags and any elements that have an associated legend text.
Clickable links work for nodes but also relationships. A thicker invisible path is drawn on top that is clickable.
Added an octagon shape since one of the new macros is EightSidedShape() for the ?shape argument. This shape is C4 diagram specific as of now but is essentially the same as the hexagon shape and maybe should be registered as a flowchart shape as well.
Since there are multiple ways to style elements in the diagram there is a styling priority. The priority goes tags -> UpdateElementStyle() / UpdateRelStyle() -> Style and Class statements. Style and class statements are shared from the other updated diagrams and should be the highest priority since they are the recommended way to style elements.
Some examples showcasing the new rendering and some new features:
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.