Add C4 Diagram. Compatible with C4-PlantUML syntax (2). #3038

[pinghe]

C4 diagram is fixed style, such as css color, so different css is not provided under different skins.

updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.

• Custom tags/stereotypes support and skinparam updates
• • AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
• • AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
• • UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
• • UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
• • 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.
• • 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.
• • BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
• • UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).

There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.

Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)

UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")

Resolves #3038

@knsv

[dbartholomae]

Really looking forward to have C4 Diagrams stable. If there is some way I can help, please let me know :)

[ashishjain0512]

Thanks! Keep them coming. We still have some remaining standard diagram compliance points:

• Support for directives
• Support for accessibility attributes
• Support for the different themes
• Additional test cases (both for parser & renderer)

You might want to sync with @dbartholomae as he seemed to be willing to help. We would love to see the C4 diagram become more mainstream and not experimental, once all these points are covered.

[dbartholomae]

@pinghe I'm happy to either split up on the tasks, or pair program, whichever you prefer :)

[xperiandri]

Is there a CI deployment of the live editor that supports it?

[pinghe]

@dbartholomae, Can you start with the following two tasks?

1. Additional test cases (both for parser & renderer)
2. a CI deployment of the live editor

[dbartholomae]

I've thought a bit about 2, and it's not that straightforward to get the correct mermaid version, so since this would require bigger architectural changes, I've opened a separate issue for it.

[dbartholomae]

I've also started writing tests for the parser in #3349