Skip to content
This repository has been archived by the owner on Jan 10, 2024. It is now read-only.

Commit

Permalink
Fixes #35.
Browse files Browse the repository at this point in the history
  • Loading branch information
Simon Brown committed Dec 18, 2022
1 parent 8b8e33c commit 27743c2
Show file tree
Hide file tree
Showing 14 changed files with 447 additions and 360 deletions.
1 change: 1 addition & 0 deletions docs/changelog.md
View file
Expand Up @@ -10,6 +10,7 @@
- Adds a view/view set property named `c4plantuml.stereotypes` that can be used to enable/disable stereotypes (these are always on by default when the legend is not shown; #29).
- Adds a `c4plantuml.stdlib` view/view set property to allow users to choose which version of C4-PlantUML should be used (built-in standard library, or GitHub).
- Fixes an issue with relationship properties not showing when `c4plantuml.relationshipProperties` is set to `true`.
- Fixes #35 (Dark mode interfaces not well supported by Mermaid exporter).

## 1.7.0 (3rd October 2022)

Expand Down
12 changes: 12 additions & 0 deletions src/main/java/com/structurizr/export/mermaid/MermaidDiagramExporter.java
View file
Expand Up @@ -53,11 +53,23 @@ protected void writeHeader(View view, IndentingWriter writer) {
writer.indent();
writer.writeLine("linkStyle default fill:#ffffff");
writer.writeLine();

String viewTitle = view.getTitle();
if (StringUtils.isNullOrEmpty(viewTitle)) {
viewTitle = view.getName();
}

writer.writeLine("subgraph diagram [" + viewTitle + "]");
writer.indent();
writer.writeLine("style diagram fill:#ffffff");
writer.writeLine();
}

@Override
protected void writeFooter(View view, IndentingWriter writer) {
writer.outdent();
writer.writeLine("end");
writer.outdent();
}

@Override
Expand Down
80 changes: 42 additions & 38 deletions src/test/java/com/structurizr/export/mermaid/36141-Components.mmd
View file
@@ -1,44 +1,48 @@
graph TB
linkStyle default fill:#ffffff

4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
17["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff
6["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff
18["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
21[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 21 fill:#438dd5,stroke:#2e6295,color:#ffffff
subgraph diagram [Internet Banking System - API Application - Components]
style diagram fill:#ffffff

subgraph 20 [API Application]
style 20 fill:#ffffff,stroke:#444444,color:#444444
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
17["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff
6["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff
18["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
21[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 21 fill:#438dd5,stroke:#2e6295,color:#ffffff

29["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
style 29 fill:#85bbf0,stroke:#5d82a8,color:#000000
30["<div style='font-weight: bold'>Accounts Summary Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Provides customers with a<br />summary of their bank<br />accounts.</div>"]
style 30 fill:#85bbf0,stroke:#5d82a8,color:#000000
31["<div style='font-weight: bold'>Reset Password Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to reset their<br />passwords with a single use<br />URL.</div>"]
style 31 fill:#85bbf0,stroke:#5d82a8,color:#000000
32["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"]
style 32 fill:#85bbf0,stroke:#5d82a8,color:#000000
33["<div style='font-weight: bold'>Mainframe Banking System Facade</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>A facade onto the mainframe<br />banking system.</div>"]
style 33 fill:#85bbf0,stroke:#5d82a8,color:#000000
34["<div style='font-weight: bold'>E-mail Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Sends e-mails to users.</div>"]
style 34 fill:#85bbf0,stroke:#5d82a8,color:#000000
end
subgraph 20 [API Application]
style 20 fill:#ffffff,stroke:#444444,color:#444444

17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->29
17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->31
17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->30
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->29
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->31
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->30
29-. "<div>Uses</div><div style='font-size: 70%'></div>" .->32
30-. "<div>Uses</div><div style='font-size: 70%'></div>" .->33
31-. "<div>Uses</div><div style='font-size: 70%'></div>" .->32
31-. "<div>Uses</div><div style='font-size: 70%'></div>" .->34
32-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->21
33-. "<div>Uses</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
34-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->6
29["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
style 29 fill:#85bbf0,stroke:#5d82a8,color:#000000
30["<div style='font-weight: bold'>Accounts Summary Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Provides customers with a<br />summary of their bank<br />accounts.</div>"]
style 30 fill:#85bbf0,stroke:#5d82a8,color:#000000
31["<div style='font-weight: bold'>Reset Password Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to reset their<br />passwords with a single use<br />URL.</div>"]
style 31 fill:#85bbf0,stroke:#5d82a8,color:#000000
32["<div style='font-weight: bold'>Security Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Provides functionality<br />related to signing in,<br />changing passwords, etc.</div>"]
style 32 fill:#85bbf0,stroke:#5d82a8,color:#000000
33["<div style='font-weight: bold'>Mainframe Banking System Facade</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>A facade onto the mainframe<br />banking system.</div>"]
style 33 fill:#85bbf0,stroke:#5d82a8,color:#000000
34["<div style='font-weight: bold'>E-mail Component</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring Bean]</div><div style='font-size: 80%; margin-top:10px'>Sends e-mails to users.</div>"]
style 34 fill:#85bbf0,stroke:#5d82a8,color:#000000
end

17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->29
17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->31
17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->30
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->29
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->31
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->30
29-. "<div>Uses</div><div style='font-size: 70%'></div>" .->32
30-. "<div>Uses</div><div style='font-size: 70%'></div>" .->33
31-. "<div>Uses</div><div style='font-size: 70%'></div>" .->32
31-. "<div>Uses</div><div style='font-size: 70%'></div>" .->34
32-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->21
33-. "<div>Uses</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
34-. "<div>Sends e-mail using</div><div style='font-size: 70%'></div>" .->6
end
62 changes: 33 additions & 29 deletions src/test/java/com/structurizr/export/mermaid/36141-Containers.mmd
View file
@@ -1,35 +1,39 @@
graph TB
linkStyle default fill:#ffffff

1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
style 1 fill:#08427b,stroke:#052e56,color:#ffffff
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
6["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff
subgraph diagram [Internet Banking System - Containers]
style diagram fill:#ffffff

subgraph 2 [Internet Banking System]
style 2 fill:#ffffff,stroke:#444444,color:#444444
1["<div style='font-weight: bold'>Personal Banking Customer</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div><div style='font-size: 80%; margin-top:10px'>A customer of the bank, with<br />personal bank accounts.</div>"]
style 1 fill:#08427b,stroke:#052e56,color:#ffffff
4["<div style='font-weight: bold'>Mainframe Banking System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>Stores all of the core<br />banking information about<br />customers, accounts,<br />transactions, etc.</div>"]
style 4 fill:#999999,stroke:#6b6b6b,color:#ffffff
6["<div style='font-weight: bold'>E-mail System</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div><div style='font-size: 80%; margin-top:10px'>The internal Microsoft<br />Exchange e-mail system.</div>"]
style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff

17["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff
18["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
19["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
style 19 fill:#438dd5,stroke:#2e6295,color:#ffffff
20["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
style 20 fill:#438dd5,stroke:#2e6295,color:#ffffff
21[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 21 fill:#438dd5,stroke:#2e6295,color:#ffffff
end
subgraph 2 [Internet Banking System]
style 2 fill:#ffffff,stroke:#444444,color:#444444

1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->19
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->17
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->18
19-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->17
20-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->21
20-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
20-. "<div>Sends e-mail using</div><div style='font-size: 70%'>[SMTP]</div>" .->6
17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->20
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->20
6-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
17["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff
18["<div style='font-weight: bold'>Mobile App</div><div style='font-size: 70%; margin-top: 0px'>[Container: Xamarin]</div><div style='font-size: 80%; margin-top:10px'>Provides a limited subset of<br />the Internet banking<br />functionality to customers<br />via their mobile device.</div>"]
style 18 fill:#438dd5,stroke:#2e6295,color:#ffffff
19["<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Delivers the static content<br />and the Internet banking<br />single page application.</div>"]
style 19 fill:#438dd5,stroke:#2e6295,color:#ffffff
20["<div style='font-weight: bold'>API Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring MVC]</div><div style='font-size: 80%; margin-top:10px'>Provides Internet banking<br />functionality via a<br />JSON/HTTPS API.</div>"]
style 20 fill:#438dd5,stroke:#2e6295,color:#ffffff
21[("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: Oracle Database Schema]</div><div style='font-size: 80%; margin-top:10px'>Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</div>")]
style 21 fill:#438dd5,stroke:#2e6295,color:#ffffff
end

1-. "<div>Visits bigbank.com/ib using</div><div style='font-size: 70%'>[HTTPS]</div>" .->19
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->17
1-. "<div>Views account balances, and<br />makes payments using</div><div style='font-size: 70%'></div>" .->18
19-. "<div>Delivers to the customer's<br />web browser</div><div style='font-size: 70%'></div>" .->17
20-. "<div>Reads from and writes to</div><div style='font-size: 70%'>[JDBC]</div>" .->21
20-. "<div>Makes API calls to</div><div style='font-size: 70%'>[XML/HTTPS]</div>" .->4
20-. "<div>Sends e-mail using</div><div style='font-size: 70%'>[SMTP]</div>" .->6
17-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->20
18-. "<div>Makes API calls to</div><div style='font-size: 70%'>[JSON/HTTPS]</div>" .->20
6-. "<div>Sends e-mails to</div><div style='font-size: 70%'></div>" .->1
end

0 comments on commit 27743c2

Please sign in to comment.