jgraph / drawio

draw.io is a JavaScript, client-side editor for general diagramming.
https://www.drawio.com
Apache License 2.0
39.68k stars 7.42k forks source link

The C4 library for software architecture visualization could be more usable and improved #1889

Closed maciek365 closed 2 years ago

maciek365 commented 3 years ago

Is your feature request related to a problem? Please describe. The current C4 library elements available in built-in Shapes seems not to be optimal and as easy-to-use as an additional, alternative library for diagrams.net mentioned on the official C4 model page: https://c4model.com/#Tooling

Describe the solution you'd like Some time ago I created a nice and easy-to-use library for software architecture visualizing in the C4 approach (according to official guidelines published in https://c4model.com/) -> https://github.com/maciek365/c4-diagrams.net

My EasyC4 library for diagrams.net application is mentioned on the official C4 Model page https://c4model.com/#Tooling as an additional library, so it became quite popular for those who are interested in creating C4 diagrams in diagrams.net Because I have feedback from many people that they like the EasyC4 library (e.g. https://github.com/maciek365/c4-diagrams.net/issues/2#issuecomment-801757693) I thought that maybe you could upgrade diagrams.net and replace the current elements available in C4 library (available in built-in Shapes) with shapes from the EasyC4 library.

The elements of the EasyC4 library seem to be more suitable for C4 diagramming (I have feedback that it is easier to use, more 'polished', and also more aesthetic than the built-in one) and maybe it is a good way to make the diagrams.net app even better :-)

Please consider using elements from my EasyC4 library (https://github.com/maciek365/c4-diagrams.net/) to upgrade the current built-in C4 shapes available in the diagrams.net app.

Describe alternatives you've considered You can also consider alternatively using my improved version of C4 library which contains more elements usable for C4 software architecture visualizing -> https://github.com/hycomsa/hycom-c4

Additional context There is no additional context.

jaydorsey commented 3 years ago

I'm new to both c4, and drawio, but I'd like to second the recommendation. I've tried three c4 libraries (including the built in one) and the one that maciek365 linked/created is the easiest one to use.

hayosc commented 2 years ago

As agreed with Maciek in end of June, I have set up an adaptation of the Easy C4 library to the layout of the Bundesregierung (German government). My main reason was, that the white font on more or less dark background is not readable at all, when printed out on an ink printer. Furthermore it does not comply to accessibility rules. This is due to the stylish original layout example by Simon Brown. Moreover I am not satisfied with the dotted-frame box implementation. I am missing the possibility to change the scope (or domain) in the rectangular brackets. My incomplete result of the adapted library is available at https://github.com/hayosc/c4-diagrams.net-bundeslayout. At the moment just Maciek is invited, because I'll have to adapt the documentation slightly as well. It already contains a dotted-line Domain object, which Maciek could directly adopt in his library.

alderg commented 2 years ago

The shapes are not resizable and not connectable. Is that as intended?

Used this for testing: https://app.diagrams.net/?clibs=Uhttps://raw.githubusercontent.com/hayosc/c4-diagrams.net-bundeslayout/master/EasyC4%20(Bundeslayout)&splash=0

maciek365 commented 2 years ago

The shapes are not resizable and not connectable. Is that as intended?

Used this for testing: https://app.diagrams.net/?clibs=Uhttps://raw.githubusercontent.com/hayosc/c4-diagrams.net-bundeslayout/master/EasyC4%20(Bundeslayout)&splash=0

Hello, thank you very much for your involvement.

The blocked resizing is intended to be compliant with the C4 model approach (https://c4model.com/) and to keep all elements in one size. If it is about connections between elements the intention was to prevent using default connection lines/arrows instead of provided predefined relationship arrows (plain and with description and technology also). These relationship arrows provided in the library are easily connectable to other C4 shapes. That lets to keep the created diagram more unified.

Please use for testing the following version of C4 shapes library: https://github.com/maciek365/c4-diagrams.net with colours compatible with the C4 and which is mentioned on the C4 Model official page (EasyC4 on tooling section for diagrams.net): https://c4model.com/#Tooling You can test this version just by clicking the link https://app.diagrams.net/?clibs=Uhttps://raw.githubusercontent.com/maciek365/c4-diagrams.net/master/EasyC4&splash=0

Please also use this version (https://github.com/maciek365/c4-diagrams.net) if you will decide to replace the current default C4 library in diagrams.net. I will be very happy if you do that and I'm sure that will be very useful for the community interested in software architecture visualization.

Best Regards Maciek

egrimate commented 2 years ago

A C4 shapes update will be in next release

maciek365 commented 2 years ago

That's fantastic news! I'm really glad to read this :-)