Update README.md with Mermaid.js v11 compatibility, add Flowchart API…

.github/workflows/codeql-analysis.yml

@@ -38,11 +38,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,10 +53,16 @@ jobs:
         # queries: security-extended,security-and-quality
 
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v4
+      with:
+        dotnet-version: 8.0.x
+
+    - name: Restore dependencies
+      run: dotnet restore src/FluentMermaidLibrary.sln -nologo -v minimal
+
+    - name: Build
+      run: dotnet build src/FluentMermaidLibrary.sln --no-restore -nologo -v minimal
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -69,4 +75,4 @@ jobs:
     #   ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/dotnet.yml

@@ -21,8 +21,8 @@ jobs:
       with:
         dotnet-version: 8.0.x
     - name: Restore dependencies
-      run: dotnet restore src/FluentMermaidLibrary.sln
+      run: dotnet restore src/FluentMermaidLibrary.sln -nologo -v minimal
     - name: Build
-      run: dotnet build --no-restore src/FluentMermaidLibrary.sln
+      run: dotnet build --no-restore src/FluentMermaidLibrary.sln -nologo -v minimal
     - name: Test
-      run: dotnet test src/FluentMermaidLibrary.sln --no-build --verbosity normal 
+      run: dotnet test src/FluentMermaidLibrary.sln --no-build -nologo -v minimal

README.md

@@ -1,25 +1,61 @@
 # FluentMermaid
-![MIT License](https://img.shields.io/github/license/wowbios/FluentMermaid)
 ![Nuget version](https://img.shields.io/nuget/v/FluentMermaid?color=blue)
 
-.NET api for generating mermaid syntax markdown that then could be rendered with [Mermaid.js](https://mermaid-js.github.io/mermaid/#/)
+.NET api for generating mermaid syntax markdown that then could be rendered with [Mermaid.js](https://mermaid.js.org/)
 
 Supported platforms: `.netstandard 2.0`
 
-Tested with Mermaid js v9.1.1
+Tested with Mermaid js [v11.12.3](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.12.3)
 
 ### For examples look at [WIKI repo page](https://github.com/wowbios/FluentMermaid/wiki/)
 
+## Flowchart API status (Mermaid v11)
+
+- Backward compatible API: `FlowChart.Create(...)` and existing `TextNode/Link/SubGraph/Interaction/Styling`.
+- Advanced additive API: `FlowChart.CreateAdvanced(...)`.
+
+### Coverage matrix
+
+- Legacy shapes (`[]`, `()`, `(( ))`, `{{ }}` etc): supported.
+- Expanded shapes syntax (`A@{ shape: ... }`): supported via `CreateAdvanced` + `TextNode(string, string shapeAlias)`.
+- Special shapes `icon` / `image`: supported via `IconNode(...)` / `ImageNode(...)`.
+- Edge IDs (`e1@-->`) and edge-level options (`animate/animation/curve`): supported via advanced `Link(... edgeId ...)` + `EdgeStyling`.
+- Link styles (`linkStyle` index/default): supported via `EdgeStyling`.
+
+### Quick examples
+
+```csharp
+using FluentMermaid.Enums;
+using FluentMermaid.Flowchart;
+using FluentMermaid.Flowchart.Enum;
+
+var chart = FlowChart.CreateAdvanced(Orientation.LeftToRight);
+
+var a = chart.TextNode("Manual input", AdvancedShape.SlopedRectangle);
+var b = chart.IconNode("fa:user", "User Icon", "square", "t", 60);
+var c = chart.ImageNode(new Uri("https://example.com/image.png"), "Image", "t", 60, 60, false);
+
+chart.Link(a, b, "e1", Link.Arrow, "", 1);
+chart.Link(b, c, Link.Thick, "next", 1); // old API still works
+
+chart.EdgeStyling.SetAnimated("e1");
+chart.EdgeStyling.SetAnimation("e1", EdgeAnimationSpeed.Fast);
+chart.EdgeStyling.SetCurve("e1", EdgeCurve.Linear);
+chart.EdgeStyling.LinkStyleDefault("color:blue");
+
+var mermaid = chart.Render();
+```
+
 # Roadmap
-- [x] [Flowchart](https://mermaid-js.github.io/mermaid/#/flowchart) 
-- [x] [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
-- [x] [Class diagram](https://mermaid-js.github.io/mermaid/#/classDiagram)
-- [x] [Pie chart](https://mermaid-js.github.io/mermaid/#/pie)
-- [x] [State diagram](https://mermaid-js.github.io/mermaid/#/stateDiagram)
-- [ ] [Entity relationship](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram) https://github.com/wowbios/FluentMermaid/issues/18
-- [ ] [User journey](https://mermaid-js.github.io/mermaid/#/user-journey) https://github.com/wowbios/FluentMermaid/issues/19
-- [ ] [Gantt](https://mermaid-js.github.io/mermaid/#/gantt) https://github.com/wowbios/FluentMermaid/issues/20
-- [ ] [Requirement](https://mermaid-js.github.io/mermaid/#/requirementDiagram) https://github.com/wowbios/FluentMermaid/issues/21
-- [ ] [Git graph](https://mermaid-js.github.io/mermaid/#/gitgraph) https://github.com/wowbios/FluentMermaid/issues/22
+- [x] [Flowchart](https://mermaid.js.org/syntax/flowchart.html)
+- [x] [Sequence diagram](https://mermaid.js.org/syntax/sequenceDiagram.html)
+- [x] [Class diagram](https://mermaid.js.org/syntax/classDiagram.html)
+- [x] [Pie chart](https://mermaid.js.org/syntax/pie.html)
+- [x] [State diagram](https://mermaid.js.org/syntax/stateDiagram.html)
+- [ ] [Entity relationship](https://mermaid.js.org/syntax/entityRelationshipDiagram.html) https://github.com/wowbios/FluentMermaid/issues/18
+- [ ] [User journey](https://mermaid.js.org/syntax/userJourney.html) https://github.com/wowbios/FluentMermaid/issues/19
+- [ ] [Gantt](https://mermaid.js.org/syntax/gantt.html) https://github.com/wowbios/FluentMermaid/issues/20
+- [ ] [Requirement](https://mermaid.js.org/syntax/requirementDiagram.html) https://github.com/wowbios/FluentMermaid/issues/21
+- [ ] [Git graph](https://mermaid.js.org/syntax/gitgraph.html) https://github.com/wowbios/FluentMermaid/issues/22
 - [ ] Flowchart fluent API https://github.com/wowbios/FluentMermaid/issues/15
 - [ ] Class diagram fluent API https://github.com/wowbios/FluentMermaid/issues/16

src/FluentMermaid/Flowchart/AdvancedShape.cs

@@ -0,0 +1,52 @@
+namespace FluentMermaid.Flowchart;
+
+public static class AdvancedShape
+{
+    public const string Bang = "bang";
+    public const string NotchedRectangle = "notch-rect";
+    public const string Cloud = "cloud";
+    public const string Hourglass = "hourglass";
+    public const string Bolt = "bolt";
+    public const string BraceLeft = "brace-l";
+    public const string BraceRight = "brace-r";
+    public const string Braces = "braces";
+    public const string LeanRight = "lean-r";
+    public const string LeanLeft = "lean-l";
+    public const string Cylinder = "cyl";
+    public const string Diamond = "diam";
+    public const string Delay = "delay";
+    public const string HorizontalCylinder = "h-cyl";
+    public const string LinedCylinder = "lin-cyl";
+    public const string CurvedTrapezoid = "curv-trap";
+    public const string DividedRectangle = "div-rect";
+    public const string Document = "doc";
+    public const string RoundedRectangle = "rounded";
+    public const string Triangle = "tri";
+    public const string Fork = "fork";
+    public const string WindowPane = "win-pane";
+    public const string FilledCircle = "f-circ";
+    public const string LinedDocument = "lin-doc";
+    public const string LinedRectangle = "lin-rect";
+    public const string NotchedPentagon = "notch-pent";
+    public const string FlippedTriangle = "flip-tri";
+    public const string SlopedRectangle = "sl-rect";
+    public const string InvertedTrapezoid = "trap-t";
+    public const string StackedDocuments = "docs";
+    public const string StackedRectangle = "st-rect";
+    public const string Odd = "odd";
+    public const string Flag = "flag";
+    public const string Hexagon = "hex";
+    public const string Trapezoid = "trap-b";
+    public const string Rectangle = "rect";
+    public const string Circle = "circle";
+    public const string SmallCircle = "sm-circ";
+    public const string DoubleCircle = "dbl-circ";
+    public const string FramedCircle = "fr-circ";
+    public const string BowTieRectangle = "bow-rect";
+    public const string FramedRectangle = "fr-rect";
+    public const string CrossedCircle = "cross-circ";
+    public const string TaggedDocument = "tag-doc";
+    public const string TaggedRectangle = "tag-rect";
+    public const string Stadium = "stadium";
+    public const string Text = "text";
+}

src/FluentMermaid/Flowchart/Enum/EdgeAnimationSpeed.cs

@@ -0,0 +1,7 @@
+namespace FluentMermaid.Flowchart.Enum;
+
+public enum EdgeAnimationSpeed
+{
+    Fast,
+    Slow
+}

src/FluentMermaid/Flowchart/Enum/EdgeCurve.cs

@@ -0,0 +1,17 @@
+namespace FluentMermaid.Flowchart.Enum;
+
+public enum EdgeCurve
+{
+    Basis,
+    BumpX,
+    BumpY,
+    Cardinal,
+    CatmullRom,
+    Linear,
+    MonotoneX,
+    MonotoneY,
+    Natural,
+    Step,
+    StepAfter,
+    StepBefore
+}

src/FluentMermaid/Flowchart/Enum/Link.cs

@@ -1,4 +1,4 @@
-namespace FluentMermaid.Flowchart.Enum;
+namespace FluentMermaid.Flowchart.Enum;
 
 public enum Link
 {
@@ -16,11 +16,21 @@ public enum Link
     /// -.-
     /// </summary>
     Dotted,
+
+    /// <summary>
+    /// -.->
+    /// </summary>
+    DottedArrow,
 
     /// <summary>
     /// ==>
     /// </summary>
     Thick,
+
+    /// <summary>
+    /// ===
+    /// </summary>
+    ThickOpen,
 
     /// <summary>
     /// --o
@@ -46,4 +56,9 @@ public enum Link
     /// x--x
     /// </summary>
     CrossDouble,
+
+    /// <summary>
+    /// ~~~
+    /// </summary>
+    Invisible,
 }

src/FluentMermaid/Flowchart/Enum/Shape.cs

@@ -1,7 +1,8 @@
-namespace FluentMermaid.Flowchart.Enum;
+namespace FluentMermaid.Flowchart.Enum;
 
 public enum Shape
 {
+    Rectangle,
     RoundEdges,
     Stadium,
     Subroutine,

src/FluentMermaid/Flowchart/Extensions/EdgeAnimationSpeedExtensions.cs

@@ -0,0 +1,14 @@
+using FluentMermaid.Flowchart.Enum;
+
+namespace FluentMermaid.Flowchart.Extensions;
+
+internal static class EdgeAnimationSpeedExtensions
+{
+    public static string Render(this EdgeAnimationSpeed speed)
+        => speed switch
+        {
+            EdgeAnimationSpeed.Fast => "fast",
+            EdgeAnimationSpeed.Slow => "slow",
+            _ => throw new ArgumentOutOfRangeException(nameof(speed), speed, null)
+        };
+}

src/FluentMermaid/Flowchart/Extensions/EdgeCurveExtensions.cs

@@ -0,0 +1,24 @@
+using FluentMermaid.Flowchart.Enum;
+
+namespace FluentMermaid.Flowchart.Extensions;
+
+internal static class EdgeCurveExtensions
+{
+    public static string Render(this EdgeCurve curve)
+        => curve switch
+        {
+            EdgeCurve.Basis => "basis",
+            EdgeCurve.BumpX => "bumpX",
+            EdgeCurve.BumpY => "bumpY",
+            EdgeCurve.Cardinal => "cardinal",
+            EdgeCurve.CatmullRom => "catmullRom",
+            EdgeCurve.Linear => "linear",
+            EdgeCurve.MonotoneX => "monotoneX",
+            EdgeCurve.MonotoneY => "monotoneY",
+            EdgeCurve.Natural => "natural",
+            EdgeCurve.Step => "step",
+            EdgeCurve.StepAfter => "stepAfter",
+            EdgeCurve.StepBefore => "stepBefore",
+            _ => throw new ArgumentOutOfRangeException(nameof(curve), curve, null)
+        };
+}

src/FluentMermaid/Flowchart/Extensions/LinkExtensions.cs

@@ -1,4 +1,4 @@
-using System.Text;
+using System.Text;
 using FluentMermaid.Flowchart.Enum;
 
 namespace FluentMermaid.Flowchart.Extensions;
@@ -19,9 +19,15 @@ public static void RenderTo(
                 RenderSingle('-', "--");
                 break;
             case Link.Dotted:
-                RenderDouble("-.", '.', "-");
+                RenderDouble("-", '.', "-");
+                break;
+            case Link.DottedArrow:
+                RenderDouble("-", '.', "->");
                 break;
             case Link.Thick:
+                RenderSingle('=', "=>");
+                break;
+            case Link.ThickOpen:
                 RenderSingle('=', "==");
                 break;
             case Link.Circle:
@@ -38,6 +44,11 @@ public static void RenderTo(
                 break;
             case Link.CrossDouble:
                 RenderDouble("x", '-', "-x");
+                break;
+            case Link.Invisible:
+                for (var i = 0; i < length + 2; i++)
+                    builder.Append('~');
+
                 break;
             default:
                 throw new ArgumentOutOfRangeException(nameof(link), link, null);

src/FluentMermaid/Flowchart/Extensions/ShapeExtensions.cs

@@ -1,4 +1,4 @@
-using FluentMermaid.Flowchart.Enum;
+using FluentMermaid.Flowchart.Enum;
 
 namespace FluentMermaid.Flowchart.Extensions;
 
@@ -7,6 +7,7 @@ internal static class ShapeExtensions
     public static string RenderStart(this Shape shape)
         => shape switch
         {
+            Shape.Rectangle => "[",
             Shape.RoundEdges => "(",
             Shape.Stadium => "([",
             Shape.Subroutine => "[[",
@@ -26,6 +27,7 @@ public static string RenderStart(this Shape shape)
     public static string RenderEnd(this Shape shape)
         => shape switch
         {
+            Shape.Rectangle => "]",
             Shape.RoundEdges => ")",
             Shape.Stadium => "])",
             Shape.Subroutine => "]]",

src/FluentMermaid/Flowchart/FlowChart.cs

@@ -1,4 +1,4 @@
-using FluentMermaid.Enums;
+using FluentMermaid.Enums;
 using FluentMermaid.Flowchart.Interfaces;
 using FluentMermaid.Flowchart.Nodes;
 
@@ -7,4 +7,6 @@ namespace FluentMermaid.Flowchart;
 public static class FlowChart
 {
     public static IFlowChart Create(Orientation orientation) => new FlowchartRootNode(orientation);
+
+    public static IFlowChartAdvanced CreateAdvanced(Orientation orientation) => new FlowchartRootNode(orientation);
 }