c4-draw.io icon indicating copy to clipboard operation
c4-draw.io copied to clipboard

Make the c4-draw.io Shapes looking nearly as the original from c4model.com

Open tobiashochguertel opened this issue 7 years ago • 8 comments

The Format of the Text on the Shapes looks ugly. The Formate is not the same as these from Simon Brown.

  • The First like with the Name isn't bold.
  • The font size is not pretty good.
  • Font Spacing should be improved to make the diagram more readable and clean looking.

Preferred way would be to develop the CSS style for the c4-draw.io plugin shapes by hold them next to the original Notation from c4model.com.

Quick Check recreate an existing complete Diagramm e.g. Pet Shop? or techtribes.js? with c4-draw.io plugin and hold the output next to, to see the differences and what can be improved in our CSS style.

tobiashochguertel avatar Sep 04 '17 20:09 tobiashochguertel

I second this.

I'm trying to match styles with C4 default, which looks really nice IMHO. Coming close but not quite:

  • Fill = #438dd5 for Containers, #1168bd for Systems, #08427b for Persons
  • Line = 2px, #3c7fc0
  • Rounded = on for lower rectangles of Persons
  • Text = 14px, Open Sans, Bold, #ffffff

Relationship labels:

  • Text = 12px, Open Sans, Bold, #707070

DKroot avatar Dec 08 '17 19:12 DKroot

Any progress on adjusting colors, font and font-size for the entities to look more as on c4model.com? If one wanted to help, where would these settings be located in the plugin code?

M0djO avatar Jul 13 '18 08:07 M0djO

@M0djO I have worked on this topic and others... I'm currently blocked in publication these commits because I changed a lot - maybe I should call it c4-draw.io.v2.

The reason is that I'm not sure if the current development version (c4-draw.io.v2) is compatible with files created with c4-draw.io (v1).

  1. Let me schedule this for this Weekend.
  2. After publication of v2 (dev & WiP), I will check that there is a way to change the colors, fonts and font-size from external. In my mind is a solution via local storage where you place a json object with your theming settings.

I saw your question 2,5 weeks ago, but I was ill - need some sun to get fit and motivated.

I hope that the v2 version will help you - it is also easier to use, but I think I broken the compatibility to previous version.

tobiashochguertel avatar Aug 01 '18 11:08 tobiashochguertel

OK, good news! So, how do we get v2?

DKroot avatar Sep 11 '18 21:09 DKroot

Hey sorry I'm ill at the moment and can't work on anything. Sorry for that, I can't provide v2 at the moment because of the illness.

tobiashochguertel avatar Sep 13 '18 12:09 tobiashochguertel

No rush. I wish you to get better!

DKroot avatar Sep 14 '18 14:09 DKroot

hi Tobias, hope you are all recovered now. Did the v2 development get completed in the end? If so, is this available please :)

Topcat0912 avatar Mar 11 '19 14:03 Topcat0912

Hey @Topcat0912 I recovered from my illness and back to my job. I realized that there are now much people who are using my plugin, I wasn't knowing that until now. I'm happy that there are so much forks and stars for this project and I thinking about to take some of my holiday days to spend to this project. I had also started to develop v2, but never released it.

As I went back to my job after my long illness, I've got an fresh new project. After the first meeting about this project, I opened draw.io and injected our c4-draw.io plugin and started to model the software with it. I like that, I see that I did some what is again useable for me after 14 months of illness.

So I'm glad to see that it is also useable for others. I will come back and continue the journey of c4-draw.io in the next weeks.

For a long time I have paid more attention to my health than before and the plugin here also helps me to have less stress during the day and to develop good software more easily.

So let's start again, and continue, Tobias Hochgürtel

tobiashochguertel avatar Dec 18 '19 11:12 tobiashochguertel