Enables the modification of differnt sketch styles and footer.
Enables the modification of differnt sketch styles and footer.
The possible font name(s) depend on the output format (e.g. PNG uses fonts which are installed on the server and SVG fonts have to be installed on the client).
The possible font name(s) depend on the output format (e.g. PNG uses fonts which are installed on the server and SVG fonts have to be installed on the client).
## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() and SHOW_PERSON_OUTLINE()
## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() and SHOW_PERSON_OUTLINE()
With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default.
With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default.
@ -24,6 +24,7 @@ C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [
C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML.
C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML.
- [C4-PlantUML](#c4-plantuml)
- [Getting Started](#getting-started)
- [Getting Started](#getting-started)
- [Including the C4-PlantUML library](#including-the-c4-plantuml-library)
- [Including the C4-PlantUML library](#including-the-c4-plantuml-library)
- [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram)
- [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram)
@ -48,7 +49,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
- [Install](#install)
- [Install](#install)
- [Usage](#usage)
- [Usage](#usage)
- [Advanced Samples](#advanced-samples)
- [Advanced Samples](#advanced-samples)
- [techtribes.js](#techtribes.js)
- [techtribes.js](#techtribesjs)
- [Message Bus and Microservices](#message-bus-and-microservices)
- [Message Bus and Microservices](#message-bus-and-microservices)
- [Background](#background)
- [Background](#background)
- [License](#license)
- [License](#license)
@ -212,83 +213,83 @@ SHOW_LEGEND()
## Supported Diagram Types
## Supported Diagram Types
> *`arg`: argument required (e.g. `alias`)
> -`arg`: argument required (e.g. `alias`)
> *`?arg`: argument optional (e.g. `?tags`); an optional argument can be directly set via its keyword `$arg=...` (e.g. `$tags="specificTag"`) without the other optional arguments
> -`?arg`: argument optional (e.g. `?tags`); an optional argument can be directly set via its keyword `$arg=...` (e.g. `$tags="specificTag"`) without the other optional arguments
*`Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: short name of Deployment_Node()
-`Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: short name of Deployment_Node()
*`Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: left aligned Node()
-`Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: left aligned Node()
*`Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: right aligned Node()
-`Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: right aligned Node()
Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md).
Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md).
## Relationship Types
## Relationship Types
*`Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
-`Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
*`BiRel` (bidirectional relationship)
-`BiRel` (bidirectional relationship)
You can force the direction of a relationship by using:
You can force the direction of a relationship by using:
*`Rel_U`, `Rel_Up`
-`Rel_U`, `Rel_Up`
*`Rel_D`, `Rel_Down`
-`Rel_D`, `Rel_Down`
*`Rel_L`, `Rel_Left`
-`Rel_L`, `Rel_Left`
*`Rel_R`, `Rel_Right`
-`Rel_R`, `Rel_Right`
In following sample a person uses different systems, and a group of persons which have bidirectional relationships
In following sample a person uses different systems, and a group of persons which have bidirectional relationships
@ -327,10 +328,10 @@ Rel_L(x, s4, "uses")
In rare cases, you can force the layout of elements which have no relationships by using:
In rare cases, you can force the layout of elements which have no relationships by using:
*`Lay_U(from, to)`, `Lay_Up(from, to)`
-`Lay_U(from, to)`, `Lay_Up(from, to)`
*`Lay_D(from, to)`, `Lay_Down(from, to)`
-`Lay_D(from, to)`, `Lay_Down(from, to)`
*`Lay_L(from, to)`, `Lay_Left(from, to)`
-`Lay_L(from, to)`, `Lay_Left(from, to)`
*`Lay_R(from, to)`, `Lay_Right(from, to)`
-`Lay_R(from, to)`, `Lay_Right(from, to)`
In following sample a person uses different systems, and a group of persons which have no relationships
In following sample a person uses different systems, and a group of persons which have no relationships
@ -368,7 +369,7 @@ Rel_L(x, s4, "uses")
(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legend)) a greater distance between an element and the
(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legend)) a greater distance between an element and the
e.g. floating legend could be required that all e.g. corners of the drawing area can be reached.
e.g. floating legend could be required that all e.g. corners of the drawing area can be reached.
*`Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND().
-`Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND().
In following sample the floating legend should be in the left bottom corner of the drawing are.
In following sample the floating legend should be in the left bottom corner of the drawing are.
(The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side)
(The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side)
This call updates the default style of the existing boundaries and creates no additional legend entry.
This call updates the default style of the existing boundaries and creates no additional legend entry.
If the element name is "" then it updates generic, enterprise, system and container boundary style in on call.
If the element name is "" then it updates generic, enterprise, system and container boundary style in on call.
*`RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument.
-`RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument.
*`EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument.
-`EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument.
*`DashedLine()`: This call returns the name of the dashed line and can be used as ?lineStyle argument.
-`DashedLine()`: This call returns the name of the dashed line and can be used as ?lineStyle argument.
*`DottedLine()`: This call returns the name of the dotted line and can be used as ?lineStyle argument.
-`DottedLine()`: This call returns the name of the dotted line and can be used as ?lineStyle argument.
*`BoldLine()`: This call returns the name of the bold line and can be used as ?lineStyle argument.
-`BoldLine()`: This call returns the name of the bold line and can be used as ?lineStyle argument.
Each element can be extended with one or multiple custom tags via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`.
Each element can be extended with one or multiple custom tags via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`.
Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`.
Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`.
@ -570,36 +571,36 @@ AddPersonTag("admin", $sprite="osa_user_audit", $legendText="administration user
Following calls introduces new element tags with element specific default colors:
Following calls introduces new element tags with element specific default colors:
*`SHOW_LEGEND()` supports the customized stereotypes
-`SHOW_LEGEND()` supports the customized stereotypes
(`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend).
(`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend).
*`SHOW_LEGEND()` has to be last line in diagram.
-`SHOW_LEGEND()` has to be last line in diagram.
* Don't use space between `$tags` and `=` (PlantUML does not support it).
- Don't use space between `$tags` and `=` (PlantUML does not support it).
* Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments).
- Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments).
* If 2 tags define the same skinparam, the first definition is used.
- If 2 tags define the same skinparam, the first definition is used.
* If specific skinparams have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names.
- If specific skinparams have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names.
* Automatically merging colors of relationship tags is not supported in PlantUML before v.1.2022
- Automatically merging colors of relationship tags is not supported in PlantUML before v.1.2022
If an older version is used and one tag modifies the line color and the other the text color, an additional combined tag has to be defined and used.
If an older version is used and one tag modifies the line color and the other the text color, an additional combined tag has to be defined and used.
### Sample with different tag combinations
### Sample with different tag combinations
@ -805,11 +806,11 @@ SHOW_LEGEND()
A model can be extended with (a table of) properties that concrete deployments or more detailed concepts can be documented:
A model can be extended with (a table of) properties that concrete deployments or more detailed concepts can be documented:
C4-PlantUML offers version information like PlantUML with its `%version()` call.
C4-PlantUML offers version information like PlantUML with its `%version()` call.
*`C4Version()`: Current C4-PlantUML version (e.g. `2.4.0beta1`).
-`C4Version()`: Current C4-PlantUML version (e.g. `2.4.0beta1`).
*`C4VersionDetails()`: (Floating) version details with the current PlantUML and C4-PlantUML version. (It can be referenced via the alias `C4VersionDetailsArea`.)
-`C4VersionDetails()`: (Floating) version details with the current PlantUML and C4-PlantUML version. (It can be referenced via the alias `C4VersionDetailsArea`.)
```plantuml
```plantuml
@startuml
@startuml
@ -902,11 +903,11 @@ It is possible to save them directly inside VS Code: [Creating your own snippets
### Usage
### Usage
* Create new PlantUML file (.puml).
- Create new PlantUML file (.puml).
* Type `c4_` for displaying artifacts templates for C4-PlantUML
- Type `c4_` for displaying artifacts templates for C4-PlantUML
* Live template create correct C4 model artifact with stubbed arguments.
- Live template create correct C4 model artifact with stubbed arguments.
* E.g. alias, label, type, technology, description
- E.g. alias, label, type, technology, description
KIRCHSTH
3 years ago