#184 code in markdown use plantuml syntax

pull/185/head
KIRCHSTH 5 years ago
parent f058e112a5
commit 5fcb83dc62

@ -10,7 +10,7 @@ For this reason, C4-PlantUML also comes with some layout options.
With the two macros `LAYOUT_TOP_DOWN()` and `LAYOUT_LEFT_RIGHT()` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN()` is the default.
```csharp
```plantuml
@startuml LAYOUT_TOP_DOWN Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -32,7 +32,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
`LAYOUT_LEFT_RIGHT()` rotates the flow visualization to *from Left to Right* and directed relations like `Rel_Left()`, `Rel_Right()`, `Rel_Up()` and `Rel_Down()` are rotated too.
```csharp
```plantuml
@startuml LAYOUT_LEFT_RIGHT Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -53,7 +53,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
`LAYOUT_LANDSCAPE()` rotates the default flow visualization to *from Left to Right* like `LAYOUT_LEFT_RIGHT()` additional **directed relations** like Rel_Left(), Rel_Right(), Rel_Up() and Rel_Down() **are not rotated** anymore.
```csharp
```plantuml
@startuml LAYOUT_LANDSCAPE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -94,7 +94,7 @@ It can also help to save some space.
All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<<stereotypes>>` and with a legend.
This can be enabled with `LAYOUT_WITH_LEGEND()`.
```csharp
```plantuml
@startuml LAYOUT_WITH_LEGEND Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -121,7 +121,7 @@ The calculated legend has following differences:
* stereotypes can remain visible (with `SHOW_LEGEND(false)`)
* **`SHOW_LEGEND()` has to be last call in the diagram**
```csharp
```plantuml
@startuml SHOW_LEGEND Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -144,7 +144,7 @@ SHOW_LEGEND()
`LAYOUT_WITH_LEGEND()` and SHOW_LEGEND(?hideStereotype)` adds the legend at the bottom right of the picture like below and additional whitespace is created.
```csharp
```plantuml
@startuml Layout With Whitespace Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -170,7 +170,7 @@ Therefore a floating legend can be added via SHOW_FLOATING_LEGEND(), positioned
- `SHOW_FLOATING_LEGEND(?alias, ?hideStereotype): shows the legend in the drawing area
- `LEGEND()`: is the default alias of the created floating legend and can be used in Lay_Distance() call
```csharp
```plantuml
@startuml Compact Legend Layout Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -206,7 +206,7 @@ Without any proof
More often these sketches are used by many people as facts and are manifested into their documentations.
With `LAYOUT_AS_SKETCH()` you can make a difference.
```csharp
```plantuml
@startuml LAYOUT_AS_SKETCH Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -231,7 +231,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
To enable a layout without `<<stereotypes>>` and legend.
This can be enabled with `HIDE_STEREOTYPE()`.
```csharp
```plantuml
@startuml HIDE_STEREOTYPE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -263,7 +263,7 @@ With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_
"person" and "person2" are predefined sprites which can be used as default sprite too.
```csharp
```plantuml
@startuml predefined sprites Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -277,7 +277,7 @@ Person(userB, "User B", "with predefined sprite person2", "person2")
**Using HIDE_PERSON_SPRITE()**
```csharp
```plantuml
@startuml HIDE_PERSON_SPRITE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -298,7 +298,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
**Using SHOW_PERSON_SPRITE()**
```csharp
```plantuml
@startuml SHOW_PERSON_SPRITE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -320,7 +320,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
**Using SHOW_PERSON_SPRITE(sprite)**
```csharp
```plantuml
@startuml SHOW_PERSON_SPRITE(sprite) Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master
@ -344,7 +344,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
**Using SHOW_PERSON_PORTRAIT()**
```csharp
```plantuml
@startuml SHOW_PERSON_PORTRAIT() Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -370,7 +370,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
> This call requires PlantUML version >= v1.2021.4!
```csharp
```plantuml
@startuml SHOW_PERSON_OUTLINE() Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

@ -20,13 +20,13 @@ At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context
To be independent of any internet connectivity, you can also download the files found in the `root` and activate the local conversion with additional command line argument `-DRELATIVE_INCLUDE="."` (that the local files are included)
```csharp
```plantuml
java -jar plantuml.jar -DRELATIVE_INCLUDE="." ...
```
If you want to use the always up-to-date version in this repo, use the following:
```csharp
```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
```
@ -36,7 +36,7 @@ Now let's create a C4 Container diagram:
After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary`
```csharp
```plantuml
@startuml C4_Elements
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -54,7 +54,7 @@ In addition to this, it is also possible to define a system or component boundar
Take a look at the following sample of a C4 Container Diagram:
```csharp
```plantuml
@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -73,7 +73,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
Entities can also be decorated with icons/sprites using the $sprite parameter, for example:
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -101,7 +101,7 @@ Rel_R(api, db, "Reads/Writes")
Similar to icons/sprites is it possible to add links to all elements and relationships:
```csharp
```plantuml
@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -124,7 +124,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/l
Elements and relations can be decorated with tags and explained via a calculated legend, for example:
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -232,7 +232,7 @@ Relationship specific sprites are typically smaller and therefore following opti
* use an additional scale factor (direct as part of the argument, or via a variable)
* if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open)
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
@ -287,7 +287,7 @@ In rare cases, you can force the layout of objects which have no relationships b
In following sample a person uses different systems, and group of persons which have no relations
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
HIDE_STEREOTYPE()
@ -326,7 +326,7 @@ e.g. floating legend could be required that all e.g. corners of the drawing area
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)
```
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -404,7 +404,7 @@ Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+
* Colors of relationship tags cannot be automatically merged (PlantUML does not support it).
If one tag modifies the line color and the other the text color, an additional combined tag has to be defined and used.
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
@ -450,7 +450,7 @@ SHOW_LEGEND(false)
If the custom (color) schema is defined via `UpdateElementStyle()` then the legend of existing elements is updated too.
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
@ -504,7 +504,7 @@ A model can be extended with (a table of) properties that concrete deployments o
Following sample uses all 3 different property definitions (and the aligned deployment node).
```csharp
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

Loading…
Cancel
Save