structurizr

structurizr

Visualise, document and explore your software architecture.

Member Since 7 years ago

Jersey, Channel Islands

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
20
repos
Activity
Nov
29
9 hours ago
started
started time in 3 hours ago
Nov
28
1 day ago
push

simonbrowndotje push structurizr/java

simonbrowndotje
simonbrowndotje

Adds support to close #169 (ability to reset URL to null).

simonbrowndotje
simonbrowndotje

Adds support to close #169 (ability to reset URL to null).

commit sha: 44fb487510954b0dbcd044575f90b38187aa7ceb

push time in 1 day ago
Activity icon
issue

simonbrowndotje issue structurizr/java

simonbrowndotje
simonbrowndotje

Feature Request: Allow API to set ModelItem#url = null

Hi,

Right now, ModelItem's setUrl checks for a non-null and non-empty String url parameter. So it can only be used to set the URL to a valid URL, not reset it back to null.

I'm requesting a way to set the url of a ModelItem to null also, to undo the action that can be done with the current setUrl. Whether this is done by allowing null in setUrl or providing e.g. a new parameter-less resetUrl doesn't matter to me.

I'm currently changing the private field using reflection, but that is nasty...

As you may have guessed, I'm dabbling with creating a viewer, and for that each diagram needs different URLs for elements, and the ability to remove a previously set URL also.

I don't mind creating a PR, I just need to know whether you prefer lifting the url != null check in setUrl or a new resetUrl or something else.

Have fun,

Peter

Activity icon
issue

pmorch issue structurizr/java

pmorch
pmorch

Feature Request: Allow API to set ModelItem#url = null

Hi,

Right now, ModelItem's setUrl checks for a non-null and non-empty String url parameter. So it can only be used to set the URL to a valid URL, not reset it back to null.

I'm requesting a way to set the url of a ModelItem to null also, to undo the action that can be done with the current setUrl. Whether this is done by allowing null in setUrl or providing e.g. a new parameter-less resetUrl doesn't matter to me.

I'm changing the private field with reflection, but that is nasty...

As you may have guessed, I'm dabbling with creating a viewer, and for that each diagram needs different URLs for elements, and the ability to remove a previously set URL also.

Have fun,

Peter

Nov
27
2 days ago
started
started time in 1 day ago
started
started time in 1 day ago
Activity icon
issue

simonbrowndotje issue comment structurizr/structurizr

simonbrowndotje
simonbrowndotje

Autolayout not working for custom diagrams

I'm using custom diagrams/elements to model other things than software architecture. When I add autolayout to the view this is what happens to a diagram that has seven elements in it and the relationships.

Screen Shot 2021-11-26 at 23 02 36 I
simonbrowndotje
simonbrowndotje
Activity icon
issue

simonbrowndotje issue structurizr/structurizr

simonbrowndotje
simonbrowndotje

Autolayout not working for custom diagrams

I'm using custom diagrams/elements to model other things than software architecture. When I add autolayout to the view this is what happens to a diagram that has seven elements in it and the relationships.

Screen Shot 2021-11-26 at 23 02 36 I
Activity icon
issue

uchoa issue structurizr/structurizr

uchoa
uchoa

Autolayout not working for custom diagrams

I'm using custom diagrams/elements to model other things than software architecture. When I add autolayout to the view this is what happens to a diagram that has seven elements in it and the relationships.

Screen Shot 2021-11-26 at 23 02 36 I
started
started time in 2 days ago
Activity icon
issue

uchoa issue structurizr/dsl

uchoa
uchoa

Autolayout not working for custom diagrams

I'm using custom diagrams/elements model other things than software architecture. When I add autolayout to the view this is what happens to a diagram that has seven elements in it and the relationships.

Screen Shot 2021-11-26 at 23 02 36 I
Nov
26
3 days ago
Activity icon
issue

simonbrowndotje issue comment structurizr/cli

simonbrowndotje
simonbrowndotje

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

simonbrowndotje
simonbrowndotje

You're welcome! If you also include a dependency on PlantUML (it's distributed as a JAR file), you could generate the SVG in the same process.

Activity icon
issue

pmorch issue comment structurizr/cli

pmorch
pmorch

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

pmorch
pmorch

Thanks for your suggestion on how to do it in java. Inspiration can be had from looking at com.structurizr.cli.ExportCommand#run

push

simonbrowndotje push structurizr/cli

simonbrowndotje
simonbrowndotje

Updated core and DSL libraries.

commit sha: 5fc136b5a06c07644dfa75efa3432f42253b4489

push time in 2 days ago
Activity icon
issue

pmorch issue comment structurizr/cli

pmorch
pmorch

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

push

simonbrowndotje push structurizr/java-extensions

simonbrowndotje
simonbrowndotje

Adds support for hyperlinked elements via the StructurizrPlantUML exporter.

commit sha: 79190bc44320f1e253669067d52321f94c65ea5c

push time in 2 days ago
push

simonbrowndotje push structurizr/java-extensions

simonbrowndotje
simonbrowndotje

Adds support for styling groups via an element style named Group' (for all groups) or Group:Name` (for the "Name" group).

commit sha: 755cce54252e6c164095702bd2415ef9c8fc5dac

push time in 2 days ago
Activity icon
issue

simonbrowndotje issue comment structurizr/cli

simonbrowndotje
simonbrowndotje

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

simonbrowndotje
simonbrowndotje

It depends how you're planning to build your tooling. If you're relying on the exports created by the CLI, then you're stuck with a single URL. One alternative is to build your tooling in Java (using structurizr-client, structurizr-dsl, structurizr-export, etc), where you could recreate the way that Structurizr Lite links views together:

  1. Parse the DSL, and create an in-memory version of the workspace.
  2. For each view { determine the view type and which elements should be hyperlinked, modifying their url properties based upon the view type; export the view to C4-PlantUML format }.
Activity icon
issue

pmorch issue comment structurizr/cli

pmorch
pmorch

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

pmorch
pmorch

I think I'm missing a piece of this interactivity puzzle. E.g. for big-bank-plc.dsl, the first three views are:

    views {
        systemlandscape "SystemLandscape" {
            include *
            autoLayout
        }

        systemcontext internetBankingSystem "SystemContext" {
            include *
            animation {
                internetBankingSystem
                customer
                mainframe
                email
            }
            autoLayout
        }

        container internetBankingSystem "Containers" {
            include *
            animation {
                customer mainframe email
                webApplication
                singlePageApplication
                mobileApp
                apiApplication
                database
            }
            autoLayout
        }
       <snip>
    }

Short version: there are two views for internetBankingSystem: a systemcontext and a container view. But only one url field for internetBankingSystem.

Longer version:

Structurizr Lite is smart and so from diagrams#SystemLandscape the link to "Internet Banking System" is a link to diagrams#SystemContext but from diagrams#SystemContext the link to the same "Internet Banking System" is to diagrams#Containers.

And I can't really do that if I'm to use the approach where internetBankingSystem has a single url field. Because I need the URLs to be different in the two diagrams#SystemLandscape and diagrams#SystemContext views.

Any good ideas on how to handle this?

My idea right now is that the tool picks a one of the possible values for the url field, e.g. diagrams#SystemContext. And then generates the .puml files. Because of the chosen default value, structurizr-SystemLandscape.puml will have the correct link. But then the new app is smart enough to modify structurizr-SystemContext.puml after generation to modify the [[link]] field. Now the app is back to brittle and non-trivial modification of the .puml file, but it could be made to work.

But is the root issue that a single url field is really not enough? Are there other cases where the URL for the entity depends on which view we're in? Could properties (of which there can be multiple) somehow come into play?

Also, keep in mind, that this is somewhat beyond my own current itch. I don't yet have any container views, so this is still a little academic for me.

push

simonbrowndotje push structurizr/java

simonbrowndotje
simonbrowndotje

Added some javadoc for the newly public methods.

commit sha: b42faa68fe3bc28627654652a4ac305036e8a45a

push time in 2 days ago
Activity icon
issue

simonbrowndotje issue structurizr/cli

simonbrowndotje
simonbrowndotje

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

Activity icon
issue

pmorch issue comment structurizr/cli

pmorch
pmorch

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

pmorch
pmorch

Correct, but you could commit the diagram source (*.dsl), diagram layout (workspace.json, if using manual layout) into your source code control system, along with a shell script that starts Structurizr Lite. Other team members can then view the diagrams interactively on their own computers.

I already did that :-)

No I don't think i got it at the conference; I then would've been sick sooner.

Activity icon
issue

simonbrowndotje issue comment structurizr/cli

simonbrowndotje
simonbrowndotje

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

simonbrowndotje
simonbrowndotje

Structurizr Lite only allows for interactivity on localhost, which means it can't be shared by the team.

Correct, but you could commit the diagram source (*.dsl), diagram layout (workspace.json, if using manual layout) into your source code control system, along with a shell script that starts Structurizr Lite. Other team members can then view the diagrams interactively on their own computers.

Sorry to hear that ... hopefully you didn't pick it up at the conference!

Activity icon
issue

pmorch issue comment structurizr/cli

pmorch
pmorch

structurizr/cli doesn't export url-s, but https://structurizr.com/dsl does

When using https://structurizr.com/dsl, a url in the input becomes a [[link]] in the output when using -format plantuml/c4plantuml. But not so with structurizr/cli.

I expect the output from https://structurizr.com/dsl to be the same as with structurizr/cli. If this the case, #58 would be possible using only built-in features.

To reproduce:

cat bug/workspace.dsl:

workspace {
    model {
        user = person "User"
        softwareSystem = softwareSystem "Software System" {
            url "http://server/path/to/softaresystem.html"
        }

        user -> softwareSystem "Uses"
    }
    views {
        systemContext softwareSystem {
            include *
            autolayout
        }

        theme default
    }
}

If I put that in https://structurizr.com/dsl and render as C4-PlantUML, I get a line like:

System(SoftwareSystem, "Software System", "")[[http://server/path/to/softaresystem.html]]

But when using structurizr-cli-1.15.0/structurizr.sh the link is missing from the output:

$ ./structurizr-cli-1.15.0/structurizr.sh export -w bug/workspace.dsl -format plantuml/c4plantuml -output bug
$ grep ^System bug/structurizr-SoftwareSystem-SystemContext.puml 
System(SoftwareSystem, "Software System", "")
pmorch
pmorch

Yeah, Just after you posted your answer, I discovered this commit https://github.com/structurizr/java-extensions/commit/e010920e155f03f6a6f55f6fc2cdb4b3a8895227 which is literally the HEAD commit. I guess I'm on the bleeding edge!

I've just compiled my own build/distributions/structurizr-cli-1.15.0.zip with structurizr-export:1.2.1 and it works flawlessly.

Activity icon
issue

pmorch issue comment structurizr/cli

pmorch
pmorch

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

pmorch
pmorch

Cool! I just might. Timing is a little off, though :-). Today I'm finishing a week of isolation due to be tested Corona positive, but I've had no symptoms. Had I known all this a week ago, that would've been a fun project for all the time I've had om my hands! :-)

Activity icon
fork

dorupirvu-ayla forked structurizr/dsl

⚡ Structurizr DSL
dorupirvu-ayla Apache License 2.0 Updated
fork time in 3 days ago
Activity icon
issue

simonbrowndotje issue comment structurizr/cli

simonbrowndotje
simonbrowndotje

Open Source interactive diagrams...

Are there any options for interacting with diagrams using a purely open source toolchain?

This structurizr/cli repo's export is (as far as I'm aware) the only Open Source way to create viewable output from a workspace.dsl file, and according to https://structurizr.org/#rendering, the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

I've taken a look at the PlantUML export format and have a suggestion for how this could be made interactive. But I'm hoping that there are there better/easier ways...

If not, then in that suggestion, I'm asking for a -linkprefix option as an improvement suggestion.

Simon, I realize this is an open core business model, so you might not be too keen on providing / catering for open source interactivity, but I just saw your talk at Goto Copenhagen 2021, where you where adamant that diagrams should be interactive and not static .png files, so I'm hoping you'll sympathize :-)

(Ugly?) Suggestion: Interactive C4 diagrams with PlantUML

I'll be using the default DSL example from https://structurizr.com/dsl in the following.

Running

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example

Generates two .puml files. If I modify example/structurizr-SoftwareSystem-SystemContext.puml with:

$ diff -uw example/structurizr-SoftwareSystem-SystemContext.puml.orig example/structurizr-SoftwareSystem-SystemContext.puml      
--- example/structurizr-SoftwareSystem-SystemContext.puml.orig	2021-11-26 05:16:22.464691300 +0100
+++ example/structurizr-SoftwareSystem-SystemContext.puml	2021-11-26 05:17:11.364691300 +0100
@@ -7,7 +7,7 @@
 !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
 
 Person(User, "User", "")
-System(SoftwareSystem, "Software System", "")
+System(SoftwareSystem, "Software System", "") [[http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg]]
 
 Rel_D(User, SoftwareSystem, "Uses")
 

Then I get svg output from PlantUML like:

<a xmlns="http://www.w3.org/2000/svg" href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" target="_top" title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:show="new" xlink:title="http://server/path/to/structurizr-SoftwareSystem-SystemContext.svg" xlink:type="simple">
  <rect fill="#1168BD" height="38.625" style="stroke:#3C7FC0;stroke-width:1.5;" width="173" x="172" y="51.9531"/>
  <text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="153" x="182" y="76.8047">Software System</text>
</a>

That is exactly enough to create an interactive tool with: An HTML page that shows the top-level .svg file in an <object src="..."></object> tag, and once it's loaded, adds a javascript event listener to that svg object so that clicking on the "Software System" doesn't follow the link, but instead loads another .svg file into the same <object></object> tag.

Adding the links to the .puml files after generation is non-trivial in the generic case, especially since the names in the PlantUML files don't match the names in the workspace.dsl file or output from list 100%. But it could be done. However, would this project be open to adding e.g. a -linkprefix option so that:

docker run -u $(id -u):$(id -g) -it --rm -v $PWD:/usr/local/structurizr structurizr/cli export  -workspace example/workspace.dsl -format plantuml/c4plantuml -output example -linkprefix http://server/path/to/

would add the links to the .puml output?

Does anybody see a cleaner / better way of achieving this?

Also, does anybody have hints about whether PlantUML or e.g. Mermaid output is "prettier" in the long run? Or whether e.g. the Mermaid export and tool chain are better suited for interactivity leading to a simpler solution than this suggestion?

simonbrowndotje
simonbrowndotje

the only tools that can be interfactive are Structurizr and Ilograph, neither of which are open source. So I'm guessing the current answer is "no".

Correct, they're not open source; Ilograph has a free plan, and Structurizr Lite is free to use though.

I've heard of teams who have built their own toolchain for assembling PlantUML diagrams into an interactive website, but none of them have open sourced their solutions unfortunately. If you do build such an open source tool, do let me know and I'll make sure that it's linked/mention it in my talks. 👍

If you're looking for collaborators, feel free to join the Structurizr Slack group.

Previous