@@ -29,14 +29,14 @@ Currently this library is in early development and not all D2 features are suppo
29
29
- [x] Shapes
30
30
- [x] Labels
31
31
- [x] Containers / Children
32
- - [ ] Styling
32
+ - [x ] Styling
33
33
- [x] Connections
34
34
- [x] Labels
35
35
- [x] Arrow Styling/Directions
36
36
- [ ] Styling
37
37
- [ ] Tooltips / Links
38
- - [ ] Icons
39
- - [ ] Standalone Text / Markdown / LateX
38
+ - [x ] Icons
39
+ - [x ] Standalone Text / Markdown / LateX
40
40
- [ ] Sequence Diagrams
41
41
- [ ] UML/Class Diagrams
42
42
- [ ] SQL Table Diagrams
@@ -51,38 +51,67 @@ dotnet add package D2.Net
51
51
52
52
## Usage
53
53
54
- Here is an example of creating a basic template using D2.Net.
54
+ Here is an example of creating a fairly complex template using D2.Net with most of the implemented features.
55
+
56
+ You can check Examples to see this and a more basic setup.
55
57
56
58
``` csharp
57
59
using D2 ;
58
60
59
- var A = new Shape (" A" , " Starting Point" );
60
- var B = new Shape (" B" , " Ending Point" );
61
- var C = new Shape (" C" , " Middle Point" , ShapeType .Hexagon );
62
-
63
- var basicTemplate = Diagram .Create ()
64
- .Add (A )
65
- .Add (B )
66
- .Add (C )
67
- .Add (new Connection (A , C ))
68
- .Add (new Connection (C , B , " Hello World!" ));
69
-
70
- // Each component overrides ToString() to return the D2 code for that instance
71
- Console .WriteLine (basicTemplate );
72
- // or you can use the Render() method
73
- Console .WriteLine (basicTemplate .Render ());
74
-
61
+ var styledTemplate = Diagram .Create ()
62
+ .CreateShape (" D" , type : ShapeType .Circle )
63
+ .CreateShape (" E" , " Styled Shape" , ShapeType .Hexagon )
64
+ .CreateShape (" F" , " Styled Diamond Shape" , ShapeType .Diamond )
65
+ .CreateDirectionalConnection (" D" , " E" , " Styled Connection" , new ArrowheadOptions (ArrowheadType .CrowsFootManyRequired , " Filled Triangle" ))
66
+ .CreateBidirectionalConnection (" E" , " F" , " Bidirectional Connection" ,
67
+ new ArrowheadOptions (ArrowheadType .CrowsFootManyRequired ),
68
+ new ArrowheadOptions (ArrowheadType .CrowsFootManyRequired ))
69
+ .CreateConnection (" F" , " D" )
70
+ .CreateMarkdownShape (" G" , @" # I can do headers
71
+
72
+ - lists
73
+ - lists
74
+
75
+ And other normal markdown stuff" )
76
+ .CreateLatexShape (" H" , @" \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h}" )
77
+ .CreateBidirectionalConnection (" G" , " H" );
78
+
79
+ Console .WriteLine (styledTemplate );
75
80
```
76
81
This will output the following D2 code:
77
82
78
83
``` d2
79
- A: Starting Point
80
- B: Ending Point
81
- C: Middle Point {
84
+ D: {
85
+ shape: circle
86
+ }
87
+ E: Styled Shape {
82
88
shape: hexagon
83
89
}
84
- A -> C
85
- C -> B: Hello World!
90
+ F: Styled Diamond Shape {
91
+ shape: diamond
92
+ }
93
+ D -> E: Styled Connection {
94
+ target-arrowhead: Filled Triangle { shape: cf-many-required; style.filled: true }
95
+ }
96
+ E <-> F: Bidirectional Connection {
97
+ source-arrowhead: { shape: cf-many-required; style.filled: true }
98
+ target-arrowhead: { shape: cf-many-required; style.filled: true }
99
+ }
100
+ F -> D
101
+ G: |md
102
+ # I can do headers
103
+
104
+ - lists
105
+ - lists
106
+
107
+ And other normal markdown stuff|
108
+ H: |latex
109
+ \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h}|
110
+ G <-> H: Bidirectional Connection {
111
+ source-arrowhead: { shape: cf-many-required; style.filled: true }
112
+ target-arrowhead: { shape: cf-many-required; style.filled: true }
113
+ }
114
+
86
115
```
87
116
That is rendered to the following diagram, using the [ D2 Playground] ( https://play.d2lang.com/?script=crRSCC5JLCrJzEtXCMjPzCvhcrJScM1LQfCdrRR8M1NSclIhfIVqLgUFBYXijMSCVCuFjNSKxPT8PK5aLkcFXTsFZy5nEOVkpeCRmpOTrxCeX5STosgFCAAA__8%3D& ) !
88
- ![ Basic Template] ( ./assets/d2-readme.png )
117
+ ![ Basic Template] ( ./assets/d2-readme.png )
0 commit comments