Show the description property for both nodes and transitions

.changeset/real-seas-yawn.md

@@ -0,0 +1,5 @@
+---
+'xstate-viz-app': minor
+---
+
+You can now visualize descriptions added directly to state nodes and transitions

src/StateNodeViz.tsx

@@ -82,6 +82,8 @@ export const StateNodeViz: React.FC<{
     return null;
   }
 
+  const description = stateNode.description || stateNode.meta?.description;
+
   return (
     <div
       data-viz="stateNodeGroup"
@@ -166,14 +168,14 @@ export const StateNodeViz: React.FC<{
               })}
             </div>
           )}
-          {stateNode.meta?.description && (
+          {description && (
             <div data-viz="stateNode-meta">
               <ReactMarkdown
                 components={{
                   a: ({ node, ...props }) => <Link {...props} />,
                 }}
               >
-                {stateNode.meta.description}
+                {description}
               </ReactMarkdown>
             </div>
           )}

src/TransitionViz.scss

@@ -72,3 +72,17 @@
   }
   padding: 0rem 0.5rem 0.5rem;
 }
+
+[data-viz='transition-description'] {
+ &:empty {
+    display: none;
+  }
+  border-top: 2px solid var(--chakra-colors-whiteAlpha-300);
+  padding: 0.5rem;
+  min-width: max-content;
+  font-size: var(--chakra-fontSizes-sm);
+  text-align: left;
+  > p {
+    max-width: 10rem;
+  }
+}

src/TransitionViz.tsx

@@ -165,6 +165,11 @@ export const TransitionViz: React.FC<{
           </div>
         )}
       </div>
+      {definition.description && (
+        <div data-viz="transition-description">
+          <p>{definition.description}</p>
+        </div>
+      )}
     </button>
   );
 };