Reload the page! to see the C4 Notation Shapes in the shape panel (figure 1).
figure 1: After the reload, the C4 Notation Shapes are available from the shape panel:
Usage
figure 2: Quick demonstration of how to use the c4-model plugin:
Drag a C4 notation shape on the diagram paper
The most C4 notation shapes provide an small gear icon when they are selected. (figure 3)
Edit the Properties of the selected C4 Notation Shape: (figure 4)
Click the small gear to open the properties dialog (figure 3)
Press the key-stroke CMD+M to open the properties dialog (figure 3)
,or use the menu: Edit → Edit Data (CMD+M) (figure 6)
Input Cursor / Focus is on the first field of the dialog, and with tab you can jump through the fields and submit (figure 5).
figure 3: Location of the small gear, to open the properties dialog:
figure 4: Example of properties dialog of an C4-Person notation shape:
figure 5: Control tab order of the properties fields:
figure 6: Other way to open the properties dialog:
Good-to-Know about the C4 shapes:
Some C4 shapes have issues/limitations which I description in this section:
C4-Relationship Notation shape:
Has also a properties dialog, but the small gear icon isn’t available with this shape. (technical reason, I haven’t found a solution, yet.)
To open for a C4 Relationship shape the Properties Editor: — key-stroke or over menu.
C4-Person Notation shape:
Has also a little technical issue, to open the properties dialog, — gear icon or over menu.
Modify the text on the shapes directly rather than using the properties dialog:
is possible,
can be handy when you want to (re-)format the text, e.g. bold, italic, font size or when you want to insert a line break within the text/properties.
but keep in mind,
if you change the text here directly, and as next open the properties dialog of this shape, your changes will get lost because the information on the shape will be reset to the values from the properties dialog.
Sorry for these issues, I keep fixing these in my spare time, feel free to create an issue, or provide an pull request, hints and ideas what We could improve!
— Tobias Hochgürtel
Key-Strokes
Table 1. Table 1: Key-Strokes
Key-Stroke
Description
CMD+M
Open’s the Data-Editor Dialog (properties dialog) of an selected shape on the diagram.
Credits
I want to thank the following people and organisations:
Draw.io Plugin: AWS Step
Functions Workflow Designer, which has inspired me to done this plugin, and what I use as code-base to done the plugin.
C4Model Author: Simon Brown, thanks for let me know that this us useful and thanks for sharing your knowledge about software architecture.
draw.io, to provide draw.io as open source software system.
I still have to plan when I will invest one or two weeks of holiday into v2. of draw.io, and will ask the developers of draw.io to explain me a few things so that I can work more efficiently on version 2.
We're seeing problems in our app when used with this plugin and collaborative editing, which was recently added for OneDrive and Google Drive, but also for GitHub and Device files (via File, Synchronize). The problem seems to be related to the plugin attaching data to cells outside of the cell.value property. The recommended and supported custom data storage in cells is inside an XML node in cell.value (see Edit, Edit Data). HTH
Is it possible to add extra shape for internal person? The shape looks exactly like external ("blue") person, but is filled with gray color like internal software system. It will allow to draw company internal users easier on the context (or system landscape) diagram. The sample diagram is there https://c4model.com/img/bigbankplc-SystemLandscape.png.
The images in the Readme show the diagram elements with resize handles on them. However, they do not seem to have them, nor can they be resized via Edit->Edit Geometry. This makes it very difficult to create diagrams of any complexity/lots of elements, on a normal document size.
I managed to install the plugin and activated the C4 shape menu which was hidden by default.
When I press ctrl-M on a C4 shape, the properties are blank.
Hi,
The plugin worked OK for me when I first added it. It does not show up when I tried to use it again, after a PC restart.
I looked into 'more shapes', but it is not there - and I also tried removing it and adding again, but still nothing.
Regards,
Bartosz
As an possible customer of C4 draw.io plugin, I want to quick see if this plugin will help me to draw C4 Diagramms with draw.io. I'm specially interested in how the author of the plugin has thought how things have to be done, this is what I want be able to read about in the End-User Manual.
Nice work Tobias and thanks for sharing this, I have some issue about text wrapping for relationship description. Any workaround to address this? Thanks again.
I plugged in success C4-draw.io for draw.io tool. But every object (container, component, context, relationship) has label/title alignment wrong. Pls see attached error-image.
More detail: description, name, type aligned to right, to left or bottom so much - they should in center of object/box
When the user unchecks the "Editable" property in the Style editor all options disappear. There seems to be no way to get the shape into an editable state.
Hello, I downloaded a diagram created online on draw.io using your plugin (it worked great) and then I installed desktop version of Draw.io, which doesn't offer the Extras -> Plugins menu.
Everything look fine, but I can't create any more of your predefined shapes.
I've installed the c4 plugin in diagrams.net 20.2.4 and everything seems to work, only the resize handles are missing. When I hover over a shape it's showing the connect elements and when I click on a shape it shows the stippled rectangle and the shape can be moved. The resize handles are missing, though.
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.
Seems that C4 shapes can be added to the current version of draw.io and actually it says "External Plugins: External plugins disabled.". Should this be mentioned at the README.md?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
