Added shapes for better accessibility

Author: darrelmiller

src/Microsoft.OpenApi.Hidi/OpenApiService.cs

@@ -605,11 +605,11 @@ private static void WriteTreeDocument(string openapi, OpenApiDocument document,
 
             writer.WriteLine(@"<div>");
             // write a span for each mermaidcolorscheme
-            foreach (var color in OpenApiUrlTreeNode.MermaidColorScheme)
+            foreach (var style in OpenApiUrlTreeNode.MermaidNodeStyles)
             {
-                writer.WriteLine($"<span style=\"padding:2px;background-color:{color.Value}\">{color.Key.Replace("_"," ")}</span>");
+                writer.WriteLine($"<span style=\"padding:2px;background-color:{style.Value.Color};border: 2px solid\">{style.Key.Replace("_"," ")}</span>");
             }
-            writer.WriteLine("/div");
+            writer.WriteLine("</div>");
             writer.WriteLine();
             writer.WriteLine("```mermaid");
             rootNode.WriteMermaid(writer);

src/Microsoft.OpenApi/Services/OpenApiUrlTreeNode.cs

@@ -244,9 +244,9 @@ public void AddAdditionalData(Dictionary<string, List<string>> additionalData)
         public void WriteMermaid(StreamWriter writer)
         {
             writer.WriteLine("graph LR");
-            foreach (var color in MermaidColorScheme)
+            foreach (var style in MermaidNodeStyles)
             {
-                writer.WriteLine($"classDef {color.Key} fill:{color.Value},stroke:#333,stroke-width:4px");
+                writer.WriteLine($"classDef {style.Key} fill:{style.Value.Color},stroke:#333,stroke-width:2px");
             }
 
             ProcessNode(this, writer);
@@ -255,35 +255,71 @@ public void WriteMermaid(StreamWriter writer)
         /// <summary>
         /// Dictionary that maps a set of HTTP methods to HTML color.  Keys are sorted, uppercased, concatenated HTTP methods.
         /// </summary>
-        public static Dictionary<string, string> MermaidColorScheme = new Dictionary<string, string>
+        public static Dictionary<string, MermaidNodeStyle> MermaidNodeStyles = new Dictionary<string, MermaidNodeStyle>
         {
-            { "GET", "lightSteelBlue" },
-            { "POST", "SteelBlue" },
-            { "GET_POST", "forestGreen" },
-            { "DELETE_GET_PATCH", "yellowGreen" },
-            { "DELETE_GET_PUT", "olive" },
-            { "DELETE_GET", "DarkSeaGreen" },
-            { "DELETE", "tomato" },
-            { "OTHER", "white" }
+            { "GET", new MermaidNodeStyle("lightSteelBlue", MermaidNodeShape.SquareCornerRectangle) },
+            { "POST", new MermaidNodeStyle("Lightcoral", MermaidNodeShape.OddShape) },
+            { "GET_POST", new MermaidNodeStyle("forestGreen", MermaidNodeShape.RoundedCornerRectangle) },
+            { "DELETE_GET_PATCH", new MermaidNodeStyle("yellowGreen", MermaidNodeShape.Circle) },
+            { "DELETE_GET_PATCH_PUT", new MermaidNodeStyle("oliveDrab", MermaidNodeShape.Circle) },
+            { "DELETE_GET_PUT", new MermaidNodeStyle("olive", MermaidNodeShape.Circle) },
+            { "DELETE_GET", new MermaidNodeStyle("DarkSeaGreen", MermaidNodeShape.Circle) },
+            { "DELETE", new MermaidNodeStyle("Tomato", MermaidNodeShape.Rhombus) },
+            { "OTHER", new MermaidNodeStyle("White", MermaidNodeShape.SquareCornerRectangle) },
         };
 
         private static void ProcessNode(OpenApiUrlTreeNode node, StreamWriter writer)
         {
             var path = string.IsNullOrEmpty(node.Path) ? "/" : SanitizeMermaidNode(node.Path);
+            var methods = GetMethods(node);
+            var (startChar, endChar) = GetShapeDelimiters(methods);
             foreach (var child in node.Children)
             {
-                writer.WriteLine($"{path} --> {SanitizeMermaidNode(child.Value.Path)}[\"{child.Key}\"]");
+                var childMethods = GetMethods(child.Value);
+                var (childStartChar, childEndChar) = GetShapeDelimiters(childMethods);
+                writer.WriteLine($"{path}{startChar}\"{node.Segment}\"{endChar} --> {SanitizeMermaidNode(child.Value.Path)}{childStartChar}\"{child.Key}\"{childEndChar}");
                 ProcessNode(child.Value, writer);
             }
-            var methods = String.Join("_", node.PathItems.SelectMany(p => p.Value.Operations.Select(o => o.Key))
+            if (String.IsNullOrEmpty(methods)) methods = "OTHER";
+            writer.WriteLine($"class {path} {methods}");
+        }
+
+        private static string GetMethods(OpenApiUrlTreeNode node)
+        {
+            return String.Join("_", node.PathItems.SelectMany(p => p.Value.Operations.Select(o => o.Key))
                 .Distinct()
                 .Select(o => o.ToString().ToUpper())
                 .OrderBy(o => o)
                 .ToList());
-            if (String.IsNullOrEmpty(methods)) methods = "OTHER";
-            writer.WriteLine($"class {path} {methods}");
         }
 
+        private static (string, string) GetShapeDelimiters(string methods)
+        {
+            
+            if (MermaidNodeStyles.ContainsKey(methods))
+            {
+                //switch on shape
+                switch (MermaidNodeStyles[methods].Shape)
+                {
+                    case MermaidNodeShape.Circle:
+                        return ("((", "))");
+                    case MermaidNodeShape.RoundedCornerRectangle:
+                        return ("(", ")");
+                    case MermaidNodeShape.Rhombus:
+                        return ("{", "}");
+                    case MermaidNodeShape.SquareCornerRectangle:
+                        return ("[", "]");
+                    case MermaidNodeShape.OddShape:
+                        return (">", "]");
+                    default:
+                        return ("[", "]");
+                }
+            }
+            else
+            {
+                return ("[", "]");
+            }
+        }
         private static string SanitizeMermaidNode(string token)
         {
             return token.Replace("\\", "/")
@@ -295,4 +331,57 @@ private static string SanitizeMermaidNode(string token)
                     .Replace("default", "def_ault");  // default is a reserved word for classes
         }
     }
+    /// <summary>
+    /// Defines the color and shape of a node in a Mermaid graph diagram
+    /// </summary>
+    public class MermaidNodeStyle
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="color"></param>
+        /// <param name="shape"></param>
+        public MermaidNodeStyle(string color, MermaidNodeShape shape)
+        {
+            Color = color;
+            Shape = shape;
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public string Color { get;  }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public MermaidNodeShape Shape { get;  }
+    }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public enum MermaidNodeShape
+    {
+        /// <summary>
+        /// Rectangle with square corners
+        /// </summary>
+        SquareCornerRectangle,
+        /// <summary>
+        /// Rectangle with rounded corners
+        /// </summary>
+        RoundedCornerRectangle,
+        /// <summary>
+        /// Circle
+        /// </summary>
+        Circle,
+        /// <summary>
+        /// Rhombus
+        /// </summary>
+        Rhombus,
+        /// <summary>
+        /// Odd shape
+        /// </summary>
+        OddShape
+    }
 }