maciek365 / c4-diagrams.net

The EasyC4 library is for quick and convenient visualising software architecture in diagrams.net / draw.io application using the C4 model approach.

EasyC4 for diagrams.net

---

Please also check the newest version of my plugin available at https://github.com/hycomsa/hycom-c4

The new version contains slightly smaller, more compact elements - seems to be more readable. You also find there an additional type of container - mobile application - and deployment node boundary. Maybe a new version will be more suitable for you.

---

The EasyC4 library is for quick and convenient visualising software architecture using the C4 model approach. The library contains a set of aesthetic C4 notation elements and lets you create C4 diagrams in the diagrams.net / draw.io application.

The EasyC4 provides the following easy to use elements:

• Person (internal and external)
• Software system (internal and external)
• Container (generic, data, microservice and message bus)
• Component
• Relationship (with description and technology, with description only and plain)
• Scope boundary (software system and container)
• Diagram title (for system context, containers and components diagrams)
• Legend

How to start?

Just click the link!

You can start very, very easy! Just click following link and start using EasyC4 library: https://app.diagrams.net/?clibs=Uhttps://raw.githubusercontent.com/maciek365/c4-diagrams.net/master/EasyC4&splash=0

Use it simply!

Simply use elements available in EasyC4 library to create diagrams in very convenient way! Just drag elements from library and double click on it to edit titles and descriptions. This is the most intuitive way to do it quick and easy with keeping aesthetic and readable form.

Below on the screen you can see EasyC4 library on the left panel of diagrams.net application.

Tips

Manually Resizing Elements

Elements will by default try to automatically resize to fit the description and other text.

If you however need to manually resize items you need to activate the "Resizable" checkbox in the "Property / Value" table within the "Format Panel".

After that you will be able to change the size of the element.

If the "Format Panel" is not visible then you can show it by clicking one of the icon on the right top.

Credits

Please share with me with your suggestions, ideas, comments, etc. Please feel free to provide me any feedback -> [email protected]

The C4 model and diagramming approach created by Simon Brown. More info: https://c4model.com/

c4-diagrams.net's Issues

[Request] C4 shapes for Lucidchart

Any chance you would be able to provide a version of the shapes that can be used in LucidCharts?

Mobile app icon

Thanks for the great C4 library for Drawio.
Is there any chance to add a mobile app container symbol as shown here: https://static.structurizr.com/workspace/76749/diagrams/Containers.png

Possible to add Web Browser and Mobile Application to this library

Noticed that these elements were added to this library: https://github.com/hycomsa/hycom-c4. Possible to add them here as well?

[MacOS] Can't use plugin when using draw.io locally

Hi @maciek365 :-)

I've downloaded the current version of the plugin onto my local hard drive and added the plugin to my locally installed draw.io app.

Draw.io recognizes the plugin, but I can't see the plugin in the toolbox on the left side of the screen and neither I can select the plugin from the the "more shapes..." dialog.

When using your recommended approach, using the web version of draw.io, everything works well but, I would love to use your plugin locally.

I would love to help, if I would know what to change/fix.

Cheers,
Marvin

System outline
MBP 16 (2019)
MacOS 10.15.7
Latest version of draw.io installed from here

Proposal: Store Non-Deflated Sources

Hello, I have a proposal to change some things within the project.
Please let me know what you think and if its OK with you we can start a draft PR and create a POC:

Currently
it is hard to maintain the elements and shapes within the project since everything is mashed-up in a single XML file with encoded entries.

Proposal

• Extract the encoded XML entries in a non-encoded format (like using https://jgraph.github.io/drawio-tools/tools/convert.html).
• Extract the SVG path shapes in separate files
• Add js tooling that encodes and combines everything in a final dist (production) version
• Add a pipeline that publishes the dist version

Benefits

• Allows to easily edit and modify existing entities
• Allows to add new shapes easily
• Newcomers can quickly see where things are coming from
• Can improve auto-documentation and probably remove the need to add a .png example to show the shapes

Drawbacks

• Includes some complexity to the project

Cannot Resize Elements

Hello,

Great library, unfortunately most elements cannot be resized and there situations where they are too big and others were text cannot be shown since they are too small.

Could it be possible to make all elements resizable ?

Best Regards

External database and legends templates

Just wondering if is a good idea to add a template for external database and legends