Different Diagrams For Different Layers of C4 Model

Question

I've started using PlantUML to render architecture diagrams as PNGs using GraphViz and IntelliJ's Plant UML plugin to produce a PNG. The most common piece of feedback is that the diagrams would be clearer if it were multiple diagrams, where one could click and drill-down from the Container layer to the Component layer, for instance. This sounds like it should be a common issue. Are there standard solutions to this, either in how we write our Plant UML or the tools we use to render them?

Answer 1

Hi, (PlantUML and) C4-PlantUML supports links in e.g. generated svg diagrams. In C4-PlantUML you can set the targets with `$link=....`, e.g.

@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Administrator", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "Sample System", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", $descr="Allows users to compare multiple Twitter timelines", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "Uses", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/link")
@enduml

http://www.plantuml.com/plantuml/svg/jP9FQzmm4CNl_XHJfOSDxDeaz5HOo6OfxI5fb-wcFHhPcdP5zKTenfYbzBjt5CS9fOVIG7omyDFelH_FkYBMcGVlu5gJxM6lVN9OlRAXTuD1E38dUjiqMO_rTyl7eHi8Sny3O-2wZxv9JeTYi28spdRDzirgLwIxsvl6QsBC8hLREQ5jm5mdcQsg7MQAOQ6Djs49QbDMIvmrnwoMy9fIjenhbUxdBelaRFYnLZFG1FDFWix5RiQuqQSuyAV4DWQglJaxMeFjbD1EWQkOLtICuv_gz5RdrVuaHhwzZaCmEfyM_OMmJvN1jFTSK7KEFokGvx6enOXTgrEIXA_OmIObPtjTs9L8sxCbRFQx-kExWnp929Vr1Tn-sPPyWzJdjTeu5qU2yhy8E88G92sJVd1i2_5XjCoOWQr7OKPwaPQbjbyFnIruIXJ-X-pdrrLLdz7Dz-UfgZj2AlryE1ns-x_TPyjx_x8bHiNdqU29y3qooIUMvLkE_ZzThp0OaNu3

BR Helmut

PS.: png's are supported too (like in PlantUML Web Server itself). What I found is written in https://github.com/plantuml-stdlib/C4-PlantUML/pull/72#issuecomment-802238636 but I'm not an HTML expert