Need help with c4-draw.io?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tobiashochguertel
549 Stars 79 Forks GNU General Public License v3.0 32 Commits 9 Opened issues

Description

C4 Modelling little bit easier

Services available

!
?

Need anything else?

Contributors list

# 263,748
HTML
JavaScr...
Terrafo...
devops
4 commits
# 334,439
HTML
Groovy
Shell
dockerf...
2 commits
# 387,577
elm
Terrafo...
JavaScr...
apache
2 commits
# 50,984
elastic...
JavaScr...
Clojure
pymongo
1 commit

:experimental: :imagesdir: img/

[[c4-modelling-little-bit-easier-c4-draw.io]]

C4 Modelling little bit easier (c4-draw.io)

Github-Pages on: https://tobiashochguertel.github.io/c4-draw.io/ (which is the same as the README.adoc file, but I think it's better to read there...)

[[about]] About ~~~~~

You can make C4 Architecture Software System Models with draw.io.

This is a C4 Modelling plugin for https://github.com/tobiashochguertel/c4-draw.io[draw.io], which provides C4 Notation Elements in draw.io.

[[quick-start]] Quick Start ~~~~~~~~~~~

  1. Access to link:https://www.draw.io/[].
  2. Save the drawing, or decide later: kbd:[File] -> kbd:[Save] -> kbd:[Option]
  3. Open the plugin dialog: kbd:[Extras] -> kbd:[Plugins]
  4. Open the add plugin dialog with an click: kbd:[Add]
  5. Put in the field kbd:[Enter Value (URL):] the link to the plugin: kbd:[https://tobiashochguertel.github.io/c4-draw.io/c4.js]
  6. Click on kbd:[Apply]
  7. 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: image:C4NotationShapes.png[]

[[usage]] Usage ~~~~~

.figure 2: Quick demonstration of how to use the c4-model plugin: image:c4-draw.io-preview-demonstration.gif[]

. 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 kbd:[CMD+M] to open the properties dialog (figure 3) .. ,or use the menu: kbd:[Edit] -> kbd:Edit Data (CMD + M) . Input Cursor / Focus is on the first field of the dialog, and with kbd:[tab] you can jump through the fields and submit (figure 5).

.figure 3: Location of the small gear, to open the properties dialog: image:small-gear-on-c4-person-shape.png[]

.figure 4: Example of properties dialog of an C4-Person notation shape: image:Data-Editor-Dialog-to-set-the-properties.png[]

.figure 5: Control tab order of the properties fields: image:Control-Tab-Order-of-C4-Notation-Shape-Properties-Dialog.png[]

.figure 6: Other way to open the properties dialog: image:Open-the-Properties-Dialog-from-Menu-bar.png[]

[[Good-to-Know-about-the-c4-shapes]] Good-to-Know about the C4 shapes: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  • [red]#Some C4 shapes have issues/limitations which I description in this section:#

[[c4-relationship-notation-shape]] 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]] C4-Person Notation shape: +++++++++++++++++++++++++

  • Has also a little technical issue, to open the properties dialog, -- gear icon or over menu.

[[directly-modify-the-shape-text]] 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.

[quote, Tobias Hochgürtel] Sorry for these issues, I keep fixing these in my spare time, feel free to create an link:https://github.com/tobiashochguertel/c4-draw.io/issues[issue], or provide an pull request, hints and ideas what We could improve!

[[Key-Strokes]] Key-Strokes ~~~~~~~~~~~

.Table 1: Key-Strokes |=== |Key-Stroke|Description

|kbd:[CMD + M] |Open's the Data-Editor Dialog (properties dialog) of an selected shape on the diagram.

|===

[[credits]] Credits ~~~~~~~

I want to thank the following people and organisations:

  • Draw.io Plugin: https://github.com/sakazuki/step-functions-draw.io[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: https://twitter.com/simonbrown[Simon Brown], thanks for let me know that this us useful and thanks for sharing your knowledge about software architecture.
  • https://www.draw.io/[draw.io], to provide draw.io as open source software system.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.