Add support for dashed, arrow and dimmed options

markdoc/tags.js

@@ -114,6 +114,8 @@ const tags = {
       toPosition: { type: String },
       path: { type: String },
       animated: { type: Boolean },
+      dashed: { type: Boolean },
+      arrow: { type: String },
       theme: { type: String },
     },
   },

src/components/diagrams/Diagram.jsx

@@ -34,7 +34,6 @@ export function WrappedDiagram({
   const [fullscreen, toggleFullscreen] = useFullscreen()
   const [downloadImage] = useDownloadImage()
   const [nodes, edges, onInit] = useTransforms(initialNodes, initialEdges, type)
-  console.log({ nodes, edges })
 
   return (
     <div
@@ -158,6 +157,8 @@ function getEdgesFromMarkdoc(markdocEdges, type) {
     data: {
       content,
       label: attributes.label,
+      dashed: attributes.dashed,
+      arrow: attributes.arrow,
       theme: attributes.theme,
       fromPosition: attributes.fromPosition,
       toPosition: attributes.toPosition,

src/components/diagrams/DiagramWhimsical.jsx

@@ -7,10 +7,17 @@ const themes = {
   default: {
     node: 'border-[#c3cfd9]',
     edge: '#788796',
+    darkEdge: '#c3cfd9',
   },
   slate: {
     node: 'border-[#788796] bg-[#ced8e0] dark:bg-[#788796]/20',
     edge: '#788796',
+    darkEdge: '#c3cfd9',
+  },
+  dimmed: {
+    node: 'border-[#c3cfd9] bg-[#f3f5f7] dark:bg-slate-800/40',
+    edge: '#c3cfd9',
+    darkEdge: '#788796',
   },
   blue: {
     node: 'border-[#2c88d9] bg-[#d5e7f7] dark:bg-[#2c88d9]/20',
@@ -216,11 +223,28 @@ export function transformNodes(nodes, getNode) {
 
 export function transformEdges(edges) {
   return edges.map((edge) => {
-    const color = themes[edge.data?.theme ?? 'default'].edge
+    const arrow = edge.data.arrow ?? 'end'
+    const hasMarkerStart = ['start', 'both'].includes(arrow)
+    const hasMarkerEnd = ['end', 'both'].includes(arrow)
+    const isDarkMode = document.querySelector('html').classList.contains('dark')
+    const theme = themes[edge.data.theme ?? 'default']
+    const color = isDarkMode ? theme.darkEdge ?? theme.edge : theme.edge
+    // TODO: Find a way to make the marker color dynamic.
+    // Currently, the marker color is set on the first render and switching
+    // between light and dark mode will not update the marker color.
     return {
       ...edge,
-      style: { ...edge.style, stroke: color },
-      markerEnd: { ...edge.markerEnd, type: 'arrowclosed', color },
+      style: {
+        stroke: color,
+        strokeDasharray: edge.data.dashed ? [4, 2] : undefined,
+        ...edge.style,
+      },
+      markerEnd: hasMarkerEnd
+        ? { ...edge.markerEnd, type: 'arrowclosed', color }
+        : undefined,
+      markerStart: hasMarkerStart
+        ? { ...edge.markerStart, type: 'arrowclosed', color }
+        : undefined,
     }
   })
 }

src/components/diagrams/FloatingEdge.jsx

@@ -11,7 +11,15 @@ import {
 } from 'reactflow'
 import { LabelOrContent, hasLabelOrContent } from './utils'
 
-export function FloatingEdge({ id, source, target, markerEnd, style, data }) {
+export function FloatingEdge({
+  id,
+  source,
+  target,
+  markerStart,
+  markerEnd,
+  style,
+  data,
+}) {
   const { getIntersectingNodes } = useReactFlow()
   const sourceNode = useStore(
     useCallback((store) => store.nodeInternals.get(source), [source])
@@ -61,7 +69,17 @@ export function FloatingEdge({ id, source, target, markerEnd, style, data }) {
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} style={style} />
+      <g className="stroke-red-500">
+        <path
+          id={id}
+          style={style}
+          d={edgePath}
+          fill="none"
+          className="react-flow__edge-path"
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+        />
+      </g>
       {hasLabel && (
         <EdgeLabelRenderer>
           <div

src/pages/token-metadata/predicting-user-behavior.md

@@ -14,18 +14,18 @@ Sit commodi iste iure molestias qui amet voluptatem sed quaerat. Nostrum aut par
 {% diagram %}
 {% node %}
   {% node #wallet theme="slate" label="Wallet Account" /%}
-  {% node %}
+  {% node theme="dimmed" %}
     Owner: System Program {% .italic %}
   {% /node %}
 {% /node %}
 
 {% node parent="wallet" x="200" %}
   {% node #token theme="blue" label="(Associated) Token Account" /%}
-  {% node %}
+  {% node theme="dimmed" %}
     Owner: (Associated) Token Program {% .italic %}
   {% /node %}
-  {% node label="Mint" /%}
-  {% node label="Owner" /%}
+  {% node #token-mint label="Mint" /%}
+  {% node #token-owner label="Owner" /%}
   {% node label="Amount" /%}
   {% node label="Delegate" /%}
   {% node label="State" /%}
@@ -41,7 +41,7 @@ Sit commodi iste iure molestias qui amet voluptatem sed quaerat. Nostrum aut par
 
 {% node parent="token" x="300" %}
   {% node #mint theme="blue" label="Mint Account" /%}
-  {% node %}
+  {% node theme="dimmed" %}
     Owner: System Program {% .italic %}
   {% /node %}
   {% node label="Mint Authority" /%}
@@ -53,7 +53,7 @@ Sit commodi iste iure molestias qui amet voluptatem sed quaerat. Nostrum aut par
 
 {% node parent="mint" x="200" %}
   {% node #metadata theme="indigo" label="Metadata Account" /%}
-  {% node %}
+  {% node theme="dimmed" %}
     Owner: Token Metadata Program {% .italic %}
   {% /node %}
   {% node label="Key = MetadataV1" /%}
@@ -61,7 +61,7 @@ Sit commodi iste iure molestias qui amet voluptatem sed quaerat. Nostrum aut par
   {% node label="Mint" /%}
   {% node label="Name" /%}
   {% node label="Symbol" /%}
-  {% node label="URI" /%}
+  {% node #metadata-uri label="URI" theme="pink" z="1" /%}
   {% node label="Seller Fee Basis Points" /%}
   {% node label="Creators" /%}
   {% node label="Primary Sale Happened" /%}
@@ -82,11 +82,8 @@ Sit commodi iste iure molestias qui amet voluptatem sed quaerat. Nostrum aut par
   {% node label="\"metadata\" + Program ID + Mint" /%}
 {% /node %}
 
-{% node parent="metadata" x="250" %}
-  {% node #offchain-metadata theme="indigo" label="Off-Chain Metadata" /%}
-  {% node %}
-    Owner: (Associated) Token Program {% .italic %}
-  {% /node %}
+{% node parent="metadata-uri" x="250" y="-9" %}
+  {% node #offchain-metadata theme="pink" label="Off-Chain Metadata" /%}
   {% node label="Name" /%}
   {% node label="Description" /%}
   {% node label="Image" /%}
@@ -95,12 +92,14 @@ Sit commodi iste iure molestias qui amet voluptatem sed quaerat. Nostrum aut par
   {% node label="..." /%}
 {% /node %}
 
-{% edge from="wallet" to="token-pda" /%}
+{% edge from="wallet" to="token-pda" fromPosition="top" /%}
+{% edge from="wallet" to="token-owner" dashed="true" arrow="none" /%}
 {% edge from="token-pda-group" to="token" /%}
 {% edge from="mint" to="token-pda" /%}
+{% edge from="mint" to="token-mint" dashed="true" arrow="none" /%}
 {% edge from="mint" to="metadata-pda" /%}
-{% edge from="metadata-pda-group" to="metadata" type="straight" /%}
-{% edge from="metadata" to="offchain-metadata" animated="true" theme="indigo" /%}
+{% edge from="metadata-pda-group" to="metadata" path="straight" /%}
+{% edge from="metadata-uri" to="offchain-metadata" animated="true" theme="pink" /%}
 {% /diagram %}
 
 ### Et pariatur ab quas