maxGraph
diff --git a/packages/html/.storybook/main.ts b/packages/html/.storybook/main.ts
@@ -16,7 +16,11 @@ limitations under the License.
 
 import type { StorybookConfig } from '@storybook/html-vite';
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    '../stories/**/Introduction.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../stories/**/*.mdx',
+  ],
   core: {
     disableTelemetry: true,
   },

diff --git a/packages/html/stories/Anchors.mdx b/packages/html/stories/Anchors.mdx
@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import * as story from './Anchors.stories';
+
+<Meta of={story} />
+
+# Anchors
+
+This example demonstrates defining fixed connection points for all shapes.
diff --git a/packages/html/stories/Animation.mdx b/packages/html/stories/Animation.mdx
@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import * as story from './Animation.stories';
+
+<Meta of={story} />
+
+# Animation
+
+This example demonstrates using SVG animations on edges to visualize the flow in a pipe.
diff --git a/packages/html/stories/AutoLayout.mdx b/packages/html/stories/AutoLayout.mdx
@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import * as story from './AutoLayout.stories';
+
+<Meta of={story} />
+
+# AutoLayout
+
+This example demonstrates running and animating a layout algorithm after every change to a graph.
diff --git a/packages/html/stories/Boundary.mdx b/packages/html/stories/Boundary.mdx
@@ -0,0 +1,11 @@
+import { ArgTypes, Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import * as story from './Boundary.stories';
+
+<Meta of={story} />
+
+# Boundary
+
+This example demonstrates implementing boundary events in BPMN diagrams.
+
+<Canvas/>
+<Controls />
diff --git a/packages/html/stories/Introduction.mdx b/packages/html/stories/Introduction.mdx
@@ -1,7 +1,3 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Home/Introduction" />
-
 <style>
   {`
     .tip {

diff --git a/packages/html/stories/Wires.mdx b/packages/html/stories/Wires.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/blocks';
+import * as story from './Wires.stories';
+
+<Meta of={story} />
+
+# Wires
+
+## Edge-to-edge connections
+
+We store the point where the mouse was released in the terminal points of the edge geometry
+and use that point to find the nearest segment on the target edge
+and the connection point between the two edges in `GraphView.updateFixedTerminalPoint`.
+
+
+## Orthogonal router
+
+The orthogonal router, which is implemented as an edge style,
+computes its result based on the output of `GraphView.updateFixedTerminalPoint`,
+which computes all connection points for edge-to-edge connections
+and constrained ports and vertices and stores them in state.absolutePoints.
+
+
+## Routing directions
+
+Routing directions are stored in the 'portConstraint' style.
+Possible values for this style are "horizontal" and "vertical".
+Note that this may have other values depending on the edge style.
+
+For edge-to-edge connections, a 'source-/targetConstraint' style is added in `GraphView.updateFixedTerminalPoint` that contains the
+orientation of the segment that the edge connects to.
+Possible values are "horizontal" and "vertical".
+
+
+## Alternative solution for connection points
+
+An alternative solution for connection points via connection constraints is demonstrated.
+In this setup, the edge is connected to the parent cell directly.
+There are no child cells that act as "ports".
+Instead, the connection information is stored as a relative point in the connecting edge.
+See also the `PortRefs` story for storing references to ports.
diff --git a/packages/html/stories/Wires.stories.js b/packages/html/stories/Wires.stories.js
@@ -15,41 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/*
-====================
-README
-====================
-
-- Edge-to-edge connections: We store the point where the mouse
-was released in the terminal points of the edge geometry and
-use that point to find the nearest segment on the target edge
-and the connection point between the two edges in
-mxGraphView.updateFixedTerminalPoint.
-
-- The orthogonal router, which is implemented as an edge style,
-computes its result based on the output of mxGraphView.
-updateFixedTerminalPoint, which computes all connection points
-for edge-to-edge connections and constrained ports and vertices
-and stores them in state.absolutePoints.
-
-- Routing directions are stored in the 'portConstraint' style.
-Possible values for this style horizontal and vertical. Note
-that this may have other values depending on the edge style.
-
-- For edge-to-edge connections, a 'source-/targetConstraint'
-style is added in updateFixedTerminalPoint that contains the
-orientation of the segment that the edge connects to. Possible
-values are horizontal, vertical.
-
-- An alternative solution for connection points via connection
-constraints is demonstrated. In this setup, the edge is connected
-to the parent cell directly. There are no child cells that act
-as "ports". Instead, the connection information is stored as a
-relative point in the connecting edge. (See also: portrefs.html
-for storing references to ports.)
-
-*/
-
 import {
   domUtils,
   styleUtils,

diff --git a/packages/html/stories/Wrapping.mdx b/packages/html/stories/Wrapping.mdx
@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import * as story from './Wrapping.stories';
+
+<Meta of={story} />
+
+# Wrapping
+
+This example demonstrates using HTML markup and word-wrapping in vertex and edge labels.
diff --git a/packages/html/stories/ZoomAndFit.mdx b/packages/html/stories/ZoomAndFit.mdx
@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/blocks';
+import * as story from './ZoomAndFit.stories';
+
+<Meta of={story} />
+
+# Zoom and Fit
+
+This example demonstrates how to use:
+- zoom in and zoom out
+- fit center, horizontal, and vertical