#219 Update Readme.md (add sprite section, a diagram with BiRel() calls and unify relation to relationship)

[kirchsth]

• "Sprites and other images" section is added to Readme.md with a description of all 3 sprite sources
• Relationship section is reordered that "Relationship specific sprites ..." are part of the "Sprites and other images" section
• Sample with BiRel() relationships is added too
• All realtion(s) are renamed to relationship(s)

@Potherca can you please review it (you can check it via kirchsth/219_UpdateSpriteDocu

Thank you and BR Helmut

....

In following sample a person uses different systems, and a group of persons which have bidirectional relationships

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
HIDE_STEREOTYPE()

Person(a, "A")
Person(b, "B")
Person(c, "C")
Person(d, "D")
Person(e, "E")

BiRel_U(a, b, "talk with")
BiRel_R(a, c, "talk with")
BiRel_D(a, d, "talk with")
BiRel_L(a, e, "talk with")

Person(x, "X")
System(s1, "S1")
System(s2, "S2")
System(s3, "S3")
System(s4, "S4")

Rel_U(x, s1, "uses")
Rel_R(x, s2, "uses")
Rel_D(x, s3, "uses")
Rel_L(x, s4, "uses")
@enduml

Layout (arrange) elements (without relationships)

.....

Sprites and other images

$sprite (images) can be defined with following PlantUML supported options:

• included (standard library) sprites via their {SpriteName}; details see sprites
• images via img:{File or Url}
• OpenIconic via &{OpenIconicName}; details see openiconic

Size of the displayed images can be changed with ,scale={factor}.
Color of the displayed images can be changed with ,color={color} .

(If sprites are defined via $tags then the calculated legend is updated too)

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

'stdlib users.puml defines sprite "users"
!include <office/users/users.puml>


AddRelTag("plantuml", $textColor="$ARROW_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:http://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:http://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered")

Person(user, "user group displayed with a sprite", $sprite="users")


Container(container, "Container with scaled and colored OpenIconic", $sprite="&folder,scale=5.0,color=gray")

System(system, "System with an image", $sprite="img:http://plantuml.com/logo3.png")

Rel(user, system, "Rel with image (via tags)", $tags="plantuml")
Rel(user, container, "Rel with OpenIconinc", $sprite="&folder")

SHOW_LEGEND()
@enduml

[Potherca]

I like the split and reorganisation. Things look a lot more readable to me.

Two thoughts I have (that could be follow-ups for later):

1. The README is getting really long and contains lots of details. We might have to start thinking about splitting things up into separate docs).

2. The Table of Content (ToC) might have to be updated:

• Getting Started
• Supported Diagram Types
• Relationship Types
• Layout (arrange) elements (without relationships)
• Global Layout Options
• Sprites and other images
• Custom tags/stereotypes support and skinparam updates
• Element and Relationship properties
• Version information
• Snippets for Visual Studio Code
• Live Templates for IntelliJ
• Advanced Samples
• Background
• License