From 348de9fb63f9ef1592e403475d32dd78225f0700 Mon Sep 17 00:00:00 2001
From: Sydney Runkle <sydneymarierunkle@gmail.com>
Date: Tue, 14 Oct 2025 13:26:56 -0400
Subject: [PATCH 1/2] Revert "revert interactive diagram (#860)"

This reverts commit 946a685169d525de71f7419ff885a069a7b40256.
---
 pipeline/core/builder.py                      |  10 +-
 pyproject.toml                                |   9 +-
 src/oss/langchain/middleware.mdx              |  20 +-
 .../middleware_visualization/README.md        |  63 +++
 .../middleware_visualization/diagrams_js.js   |   1 +
 .../diagrams_python.js                        |   1 +
 .../generate_middleware_diagrams.py           | 259 +++++++++++
 .../middleware_visualization/index.html       | 401 ++++++++++++++++++
 tests/unit_tests/test_builder.py              |   1 +
 9 files changed, 748 insertions(+), 17 deletions(-)
 create mode 100644 src/plugins/middleware_visualization/README.md
 create mode 100644 src/plugins/middleware_visualization/diagrams_js.js
 create mode 100644 src/plugins/middleware_visualization/diagrams_python.js
 create mode 100644 src/plugins/middleware_visualization/generate_middleware_diagrams.py
 create mode 100644 src/plugins/middleware_visualization/index.html

diff --git a/pipeline/core/builder.py b/pipeline/core/builder.py
index a0ec66207..8185dd755 100644
--- a/pipeline/core/builder.py
+++ b/pipeline/core/builder.py
@@ -51,6 +51,7 @@ def __init__(self, src_dir: Path, build_dir: Path) -> None:
             ".yaml",
             ".css",
             ".js",
+            ".html",
         }
 
         # Mapping of language codes to full names for URLs
@@ -152,8 +153,8 @@ def rewrite_link(match: re.Match) -> str:
             url = match.group(2)  # The URL
             post = match.group(3)  # Everything after the URL
 
-            # Only rewrite absolute /oss/ paths that don't contain 'images'
-            if url.startswith("/oss/") and "images" not in url:
+            # Only rewrite absolute /oss/ paths that don't contain 'images' or 'plugins'
+            if url.startswith("/oss/") and "images" not in url and "plugins" not in url:
                 parts = url.split("/")
                 # Insert full language name after "oss"
                 parts.insert(2, self.language_url_names[target_language])
@@ -739,8 +740,11 @@ def is_shared_file(self, file_path: Path) -> bool:
         if "snippets" in relative_path.parts:
             return True
 
+        if "plugins" in relative_path.parts:
+            return True
+
         # JavaScript and CSS files should be shared (used for custom scripts/styles)
-        return file_path.suffix.lower() in {".js", ".css"}
+        return file_path.suffix.lower() in {".js", ".css", ".html", ".json"}
 
     def _copy_shared_files(self) -> None:
         """Copy files that should be shared between versions."""
diff --git a/pyproject.toml b/pyproject.toml
index 4231dbe5f..b9abdd8cf 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -70,7 +70,8 @@ asyncio_default_fixture_loop_scope = "function"
 line-length = 88
 extend-exclude = [
     "scripts/update_mdx.py",
-    "pipeline/tools/notebook/convert.py"
+    "pipeline/tools/notebook/convert.py",
+    "src/plugins/middleware_visualization/generate_middleware_diagrams.py"
 ]
 
 
@@ -133,3 +134,9 @@ ignore = [
 
 [tool.ruff.lint.pydocstyle]
 convention = "google"
+
+
+[tool.mypy]
+exclude = [
+    "src/plugins/middleware_visualization/generate_middleware_diagrams.py",
+]
diff --git a/src/oss/langchain/middleware.mdx b/src/oss/langchain/middleware.mdx
index 273557c8d..aa943a217 100644
--- a/src/oss/langchain/middleware.mdx
+++ b/src/oss/langchain/middleware.mdx
@@ -971,21 +971,15 @@ agent = create_agent(
 
 #### Node-style hooks
 
-Run at specific points in the execution flow:
+Run at specific points in the execution flow.
 
-:::python
-- `before_agent` - Before agent starts (once per invocation)
-- `before_model` - Before each model call
-- `after_model` - After each model response
-- `after_agent` - After agent completes (up to once per invocation)
-:::
+**Try it:** The interactive widget below shows all available hooks and lets you toggle different combinations to see how they affect the agent execution graph:
 
-:::js
-- `beforeAgent` - Before agent starts (once per invocation)
-- `beforeModel` - Before each model call
-- `afterModel` - After each model response
-- `afterAgent` - After agent completes (up to once per invocation)
-:::
+<iframe
+  src="/plugins/middleware_visualization/index.html"
+  style={{ width: "100%", height: "600px", border: "none" }}
+  title="Interactive Middleware Visualizer"
+/>
 
 **Example: Logging middleware**
 
diff --git a/src/plugins/middleware_visualization/README.md b/src/plugins/middleware_visualization/README.md
new file mode 100644
index 000000000..d2a1c70a4
--- /dev/null
+++ b/src/plugins/middleware_visualization/README.md
@@ -0,0 +1,63 @@
+# Middleware Hooks Visualizer
+
+Minimal interactive visualizer for LangChain middleware hooks and agent graphs.
+
+## Features
+
+- **Language-specific diagrams**: Automatically switches between Python (snake_case) and JavaScript (camelCase) naming based on active tab
+- **Interactive tooltips**: Hover over checkboxes to see what each hook does
+- **Compact layout**: Optimized spacing for better visual hierarchy
+- **Mintlify integration**: Uses Mintlify design tokens for consistent styling
+
+## Usage
+
+The `index.html` file can be embedded directly into Mintlify documentation:
+
+```html
+<iframe
+  src="/plugins/middleware_visualization/index.html"
+  style={{ width: "100%", height: "600px", border: "none" }}
+  title="Interactive Middleware Visualizer"
+/>
+```
+
+**Binary naming scheme (5 bits):**
+```
+Bit 0: tools
+Bit 1: before_agent
+Bit 2: before_model
+Bit 3: after_model
+Bit 4: after_agent
+```
+
+Example: `10110` = tools + before_model + after_model
+
+## Files
+
+- `index.html` - Embeddable widget with interactive controls and diagram rendering
+- `diagrams_python.js` - Python version with snake_case naming (e.g., `before_agent`)
+- `diagrams_js.js` - JavaScript version with camelCase naming (e.g., `beforeAgent`)
+- `generate_middleware_diagrams.py` - Diagram generator script
+
+## Regenerating Diagrams
+
+To regenerate the diagrams after making changes to middleware hooks:
+
+```bash
+uv run python src/plugins/middleware_visualization/generate_middleware_diagrams.py
+```
+
+This generates three files:
+- `diagrams_python.js` - Python diagrams with snake_case hooks
+- `diagrams_js.js` - JavaScript diagrams with camelCase hooks
+
+### Diagram Configuration
+
+The generator creates compact diagrams with:
+- `nodeSpacing: 30` - Horizontal spacing between nodes
+- `rankSpacing: 40` - Vertical spacing between ranks
+- `padding: 10` - Diagram padding
+
+Adjust these values in `generate_middleware_diagrams.py` line 144-150 to modify diagram height.
+
+**Note**: Mintlify's dev server doesn't serve JSON files, so we convert the data to JavaScript files that can be loaded via `<script src>`.
diff --git a/src/plugins/middleware_visualization/diagrams_js.js b/src/plugins/middleware_visualization/diagrams_js.js
new file mode 100644
index 000000000..76404d96c
--- /dev/null
+++ b/src/plugins/middleware_visualization/diagrams_js.js
@@ -0,0 +1 @@
+const diagrams = {"00000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware(beforeModel)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware(beforeModel)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> BeforeModelMiddleware;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> BeforeModelMiddleware;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware;\n\tAfterModelMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> __end__;\n\tAfterModelMiddleware -.-> model;\n\tAfterModelMiddleware -.-> tools;\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\tAfterModelMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> __end__;\n\tAfterModelMiddleware -.-> model;\n\tAfterModelMiddleware -.-> tools;\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel --> AfterModelMiddleware;\n\tAfterModelMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> BeforeModelMiddleware;\n\tAfterModelMiddleware -.-> __end__;\n\tAfterModelMiddleware -.-> tools;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> BeforeModelMiddleware;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\tAfterModelMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> BeforeModelMiddleware;\n\tAfterModelMiddleware -.-> __end__;\n\tAfterModelMiddleware -.-> tools;\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> BeforeModelMiddleware;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel --> AfterAgentMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel -.-> AfterAgentMiddleware;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> model;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterAgentMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel -.-> AfterAgentMiddleware;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> model;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel --> AfterAgentMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel -.-> AfterAgentMiddleware;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> BeforeModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterAgentMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel -.-> AfterAgentMiddleware;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> BeforeModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware --> AfterAgentMiddleware;\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> AfterAgentMiddleware;\n\tAfterModelMiddleware -.-> model;\n\tAfterModelMiddleware -.-> tools;\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> model;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware --> AfterAgentMiddleware;\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> AfterAgentMiddleware;\n\tAfterModelMiddleware -.-> model;\n\tAfterModelMiddleware -.-> tools;\n\tBeforeAgentMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> model;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware --> AfterAgentMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel --> AfterModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> AfterAgentMiddleware;\n\tAfterModelMiddleware -.-> BeforeModelMiddleware;\n\tAfterModelMiddleware -.-> tools;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeModelMiddleware;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> BeforeModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware --> AfterAgentMiddleware;\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware(beforeAgent)\n\tBeforeModelMiddleware(beforeModel)\n\tAfterModelMiddleware(afterModel)\n\tAfterAgentMiddleware(afterAgent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware -.-> AfterAgentMiddleware;\n\tAfterModelMiddleware -.-> BeforeModelMiddleware;\n\tAfterModelMiddleware -.-> tools;\n\tBeforeAgentMiddleware --> BeforeModelMiddleware;\n\tBeforeModelMiddleware --> model;\n\t__start__ --> BeforeAgentMiddleware;\n\tmodel --> AfterModelMiddleware;\n\ttools -.-> AfterAgentMiddleware;\n\ttools -.-> BeforeModelMiddleware;\n\tAfterAgentMiddleware --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n"};
\ No newline at end of file
diff --git a/src/plugins/middleware_visualization/diagrams_python.js b/src/plugins/middleware_visualization/diagrams_python.js
new file mode 100644
index 000000000..e1ee6487b
--- /dev/null
+++ b/src/plugins/middleware_visualization/diagrams_python.js
@@ -0,0 +1 @@
+const diagrams = {"00000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11000":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11100":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel -.-> __end__;\n\tmodel -.-> tools;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterModelMiddleware\\2eafter_model --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> __end__;\n\tAfterModelMiddleware\\2eafter_model -.-> model;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterModelMiddleware\\2eafter_model --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11010":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> __end__;\n\tAfterModelMiddleware\\2eafter_model -.-> model;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> __end__;\n\ttools -.-> model;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterModelMiddleware\\2eafter_model --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterModelMiddleware\\2eafter_model -.-> __end__;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterModelMiddleware\\2eafter_model --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11110":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterModelMiddleware\\2eafter_model -.-> __end__;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\ttools -.-> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel --> AfterAgentMiddleware\\2eafter_agent;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\t__start__ --> model;\n\tmodel -.-> AfterAgentMiddleware\\2eafter_agent;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterAgentMiddleware\\2eafter_agent;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11001":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel -.-> AfterAgentMiddleware\\2eafter_agent;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel --> AfterAgentMiddleware\\2eafter_agent;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel -.-> AfterAgentMiddleware\\2eafter_agent;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterAgentMiddleware\\2eafter_agent;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11101":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel -.-> AfterAgentMiddleware\\2eafter_agent;\n\tmodel -.-> tools;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model --> AfterAgentMiddleware\\2eafter_agent;\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> AfterAgentMiddleware\\2eafter_agent;\n\tAfterModelMiddleware\\2eafter_model -.-> model;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\t__start__ --> model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model --> AfterAgentMiddleware\\2eafter_agent;\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11011":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> AfterAgentMiddleware\\2eafter_agent;\n\tAfterModelMiddleware\\2eafter_model -.-> model;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\tBeforeAgentMiddleware\\2ebefore_agent --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","00111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model --> AfterAgentMiddleware\\2eafter_agent;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","10111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> AfterAgentMiddleware\\2eafter_agent;\n\tAfterModelMiddleware\\2eafter_model -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeModelMiddleware\\2ebefore_model;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","01111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model --> AfterAgentMiddleware\\2eafter_agent;\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n","11111":"---\nconfig:\n  flowchart:\n    curve: linear\n    nodeSpacing: 30\n    rankSpacing: 40\n    padding: 10\n---\ngraph TD;\n\t__start__([__start__]):::first\n\tmodel(model)\n\ttools(tools)\n\tBeforeAgentMiddleware\\2ebefore_agent(before_agent)\n\tBeforeModelMiddleware\\2ebefore_model(before_model)\n\tAfterModelMiddleware\\2eafter_model(after_model)\n\tAfterAgentMiddleware\\2eafter_agent(after_agent)\n\t__end__([__end__]):::last\n\tAfterModelMiddleware\\2eafter_model -.-> AfterAgentMiddleware\\2eafter_agent;\n\tAfterModelMiddleware\\2eafter_model -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterModelMiddleware\\2eafter_model -.-> tools;\n\tBeforeAgentMiddleware\\2ebefore_agent --> BeforeModelMiddleware\\2ebefore_model;\n\tBeforeModelMiddleware\\2ebefore_model --> model;\n\t__start__ --> BeforeAgentMiddleware\\2ebefore_agent;\n\tmodel --> AfterModelMiddleware\\2eafter_model;\n\ttools -.-> AfterAgentMiddleware\\2eafter_agent;\n\ttools -.-> BeforeModelMiddleware\\2ebefore_model;\n\tAfterAgentMiddleware\\2eafter_agent --> __end__;\n\tclassDef default fill:#f2f0ff,line-height:1.2\n\tclassDef first fill-opacity:0\n\tclassDef last fill:#bfb6fc\n"};
\ No newline at end of file
diff --git a/src/plugins/middleware_visualization/generate_middleware_diagrams.py b/src/plugins/middleware_visualization/generate_middleware_diagrams.py
new file mode 100644
index 000000000..39c57fd66
--- /dev/null
+++ b/src/plugins/middleware_visualization/generate_middleware_diagrams.py
@@ -0,0 +1,259 @@
+"""Generate Mermaid diagrams for middleware hook combinations.
+
+Binary naming scheme (5 bits):
+- Bit 0: has_tools
+- Bit 1: before_agent
+- Bit 2: before_model
+- Bit 3: after_model
+- Bit 4: after_agent
+
+Example: "10110" = tools, before_model, after_model
+"""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+from typing import Any
+
+from langchain.agents.factory import create_agent
+from langchain.agents.middleware.types import AgentMiddleware, AgentState
+from langchain_core.language_models.chat_models import SimpleChatModel
+from langchain_core.tools import tool
+
+
+class DemoModel(SimpleChatModel):
+    """Demo model for generating diagrams."""
+
+    def _call(self, messages, stop=None, run_manager=None, **kwargs):
+        return "Demo response"
+
+    @property
+    def _llm_type(self) -> str:
+        return "demo"
+
+
+@tool
+def demo_tool(query: str) -> str:
+    """Demo tool for testing."""
+    return f"Result for: {query}"
+
+
+class BeforeModelMiddleware(AgentMiddleware):
+    """Middleware with only before_model hook."""
+
+    def before_model(self, state: AgentState, runtime) -> dict[str, Any] | None:
+        return None
+
+
+class AfterModelMiddleware(AgentMiddleware):
+    """Middleware with only after_model hook."""
+
+    def after_model(self, state: AgentState, runtime) -> dict[str, Any] | None:
+        return None
+
+
+class BeforeAgentMiddleware(AgentMiddleware):
+    """Middleware with only before_agent hook."""
+
+    def before_agent(self, state: AgentState, runtime) -> dict[str, Any] | None:
+        return None
+
+
+class AfterAgentMiddleware(AgentMiddleware):
+    """Middleware with only after_agent hook."""
+
+    def after_agent(self, state: AgentState, runtime) -> dict[str, Any] | None:
+        return None
+
+
+def binary_name(
+    has_tools: bool,
+    before_agent: bool,
+    before_model: bool,
+    after_model: bool,
+    after_agent: bool,
+) -> str:
+    """Generate binary name for configuration.
+
+    Bit positions:
+    - Bit 0: has_tools
+    - Bit 1: before_agent
+    - Bit 2: before_model
+    - Bit 3: after_model
+    - Bit 4: after_agent
+    """
+    bits = [
+        "1" if has_tools else "0",
+        "1" if before_agent else "0",
+        "1" if before_model else "0",
+        "1" if after_model else "0",
+        "1" if after_agent else "0",
+    ]
+    return "".join(bits)
+
+
+def clean_mermaid_diagram(mermaid: str, language: str = "python") -> str:
+    """Clean up Mermaid diagram by simplifying node names and improving styling.
+
+    Args:
+        mermaid: Raw Mermaid diagram from LangGraph.
+        language: "python" for snake_case or "javascript" for camelCase naming.
+
+    Returns:
+        Cleaned Mermaid diagram with simplified node names.
+    """
+    import re
+
+    # Replace middleware class names with simple hook names in node labels
+    # Pattern matches: node_id(ClassName.hook_name) -> node_id(hook_name)
+    if language == "javascript":
+        replacements = [
+            (r"\(BeforeAgentMiddleware\.before_agent\)", "(beforeAgent)"),
+            (r"\(BeforeModelMiddleware\.before_model\)", "(beforeModel)"),
+            (r"\(AfterModelMiddleware\.after_model\)", "(afterModel)"),
+            (r"\(AfterAgentMiddleware\.after_agent\)", "(afterAgent)"),
+            # Also update escaped versions in node IDs
+            (r"BeforeAgentMiddleware\\2ebefore_agent", "BeforeAgentMiddleware"),
+            (r"BeforeModelMiddleware\\2ebefore_model", "BeforeModelMiddleware"),
+            (r"AfterModelMiddleware\\2eafter_model", "AfterModelMiddleware"),
+            (r"AfterAgentMiddleware\\2eafter_agent", "AfterAgentMiddleware"),
+        ]
+    else:  # python
+        replacements = [
+            (r"\(BeforeAgentMiddleware\.before_agent\)", "(before_agent)"),
+            (r"\(BeforeModelMiddleware\.before_model\)", "(before_model)"),
+            (r"\(AfterModelMiddleware\.after_model\)", "(after_model)"),
+            (r"\(AfterAgentMiddleware\.after_agent\)", "(after_agent)"),
+        ]
+
+    # Common replacements for both languages
+    replacements.extend(
+        [
+            # Remove <p> tags from start/end nodes to make them normal size
+            (r"__start__\(\[<p>__start__</p>\]\)", "__start__([__start__])"),
+            (r"__end__\(\[<p>__end__</p>\]\)", "__end__([__end__])"),
+        ]
+    )
+
+    for pattern, replacement in replacements:
+        mermaid = re.sub(pattern, replacement, mermaid)
+
+    # Add more compact layout configuration
+    # Replace the config section to make diagrams more compact
+    config_pattern = r"---\nconfig:\n  flowchart:\n    curve: linear\n---\n"
+    compact_config = """---
+config:
+  flowchart:
+    curve: linear
+    nodeSpacing: 30
+    rankSpacing: 40
+    padding: 10
+---
+"""
+    mermaid = re.sub(config_pattern, compact_config, mermaid)
+
+    return mermaid
+
+
+def generate_all_diagrams(language: str = "python") -> dict[str, str]:
+    """Generate Mermaid diagrams for all 32 possible hook combinations.
+
+    Args:
+        language: "python" for snake_case or "javascript" for camelCase naming.
+
+    Returns:
+        Dictionary mapping binary configuration names to Mermaid diagram strings.
+    """
+    model = DemoModel()
+    diagrams = {}
+
+    # Generate all 32 combinations (2^5)
+    for i in range(32):
+        # Extract bits
+        has_tools = bool(i & 0b00001)
+        before_agent = bool(i & 0b00010)
+        before_model = bool(i & 0b00100)
+        after_model = bool(i & 0b01000)
+        after_agent = bool(i & 0b10000)
+
+        # Build middleware list
+        middleware = []
+        if before_agent:
+            middleware.append(BeforeAgentMiddleware())
+        if before_model:
+            middleware.append(BeforeModelMiddleware())
+        if after_model:
+            middleware.append(AfterModelMiddleware())
+        if after_agent:
+            middleware.append(AfterAgentMiddleware())
+
+        # Generate binary name
+        name = binary_name(
+            has_tools,
+            before_agent,
+            before_model,
+            after_model,
+            after_agent,
+        )
+
+        # Create agent and generate diagram
+        tools = [demo_tool] if has_tools else []
+        agent = create_agent(model=model, tools=tools, middleware=middleware)
+
+        mermaid = agent.get_graph().draw_mermaid()
+        # Clean up node names
+        mermaid = clean_mermaid_diagram(mermaid, language=language)
+        diagrams[name] = mermaid
+
+        print(
+            f"Generated: {name} (tools={int(has_tools)}, "
+            f"before_agent={int(before_agent)}, before_model={int(before_model)}, "
+            f"after_model={int(after_model)}, after_agent={int(after_agent)})"
+        )
+
+    return diagrams
+
+
+def save_diagrams_to_inline_js(diagrams: dict[str, str], output_path: Path) -> None:
+    """Save diagrams as an inline JavaScript constant file.
+
+    This is needed because Mintlify's dev server doesn't serve JSON files.
+    By converting to a JS file, the diagrams data can be loaded via <script src>.
+
+    Args:
+        diagrams: Dictionary mapping binary names to Mermaid diagrams.
+        output_path: Path where the JS file should be saved.
+    """
+    # Minified JSON (no whitespace)
+    json_str = json.dumps(diagrams, separators=(",", ":"))
+    js_content = f"const diagrams = {json_str};"
+
+    output_path.write_text(js_content)
+    print(f"Saved inline JS version to {output_path}")
+
+
+def main() -> None:
+    """Generate all diagrams and save to both JSON and inline JS formats."""
+    # Generate Python version (snake_case)
+    print("\nGenerating Python diagrams (snake_case)...")
+    python_diagrams = generate_all_diagrams(language="python")
+
+    # Generate JavaScript version (camelCase)
+    print("\nGenerating JavaScript diagrams (camelCase)...")
+    js_diagrams = generate_all_diagrams(language="javascript")
+
+    # Save to same directory as script
+    output_dir = Path(__file__).parent
+    output_dir.mkdir(parents=True, exist_ok=True)
+
+    # Save as inline JS files (for Mintlify to serve)
+    python_js_path = output_dir / "diagrams_python.js"
+    save_diagrams_to_inline_js(python_diagrams, python_js_path)
+
+    js_js_path = output_dir / "diagrams_js.js"
+    save_diagrams_to_inline_js(js_diagrams, js_js_path)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/src/plugins/middleware_visualization/index.html b/src/plugins/middleware_visualization/index.html
new file mode 100644
index 000000000..f7408e3b8
--- /dev/null
+++ b/src/plugins/middleware_visualization/index.html
@@ -0,0 +1,401 @@
+<!-- Middleware Hooks Visualizer -->
+<style>
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    height: 550px;
+    margin: 0;
+}
+
+body {
+    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+    color: var(--text-primary, #1a202c);
+    padding: 1.25rem;
+    line-height: 1.6;
+    overflow: hidden;
+    height: 500px;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-layout {
+    display: grid;
+    grid-template-columns: 60% 1fr;
+    gap: 1.5rem;
+    align-items: start;
+    height: 100%;
+    flex: 1;
+}
+
+.left-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    height: 100%;
+}
+
+h3 {
+    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+    font-size: 1.125em;
+    font-weight: 400;
+    margin: 0 0 1.25rem 0;
+    color: var(--text-primary, #1a202c);
+    line-height: 1.4;
+}
+
+h4 {
+    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+    font-size: 0.9375em;
+    font-weight: 500;
+    margin: 0 0 0.75rem 0;
+    color: var(--text-primary, #1a202c);
+    line-height: 1.4;
+}
+
+h4.section-spacing {
+    margin-top: 1.5rem;
+}
+
+.section-title {
+    font-family: var(--font-heading, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    color: var(--text-primary, #1a202c);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.75rem;
+}
+
+.hooks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.hook-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.625rem;
+    padding: 0.375rem;
+    border-radius: 6px;
+    transition: background-color 0.15s ease;
+}
+
+.tools-item {
+    border-top: 1px solid var(--border-color, #e5e7eb);
+    padding-top: 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.hook-item:hover {
+    background-color: var(--hover-bg, rgba(0, 0, 0, 0.02));
+}
+
+.hook-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--primary, #7c3aed);
+    margin-top: 2px;
+    flex-shrink: 0;
+}
+
+.hook-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.hook-item-title {
+    font-weight: 500;
+    font-size: 0.8125rem;
+    color: var(--text-primary, #1a202c);
+    cursor: pointer;
+}
+
+.hook-item-desc {
+    font-size: 0.9rem;
+    color: var(--text-secondary, #6b7280);
+    line-height: 1.5;
+}
+
+/* Inline code styling to match Mintlify */
+code {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-size: 1.25em;
+    font-weight: 700;
+    font-variant-ligatures: none;
+    border-radius: 0.375rem;
+    background-color: rgba(243, 244, 246, 0.5);
+    padding: 0.125rem 0.5rem;
+    color: var(--text-primary, #4b5563);
+}
+
+.right-column {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.graph-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+#agent-graph {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 0;
+    overflow: hidden;
+}
+
+#agent-graph svg {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+@media (max-width: 400px) {
+    .main-layout {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+
+<div class="container">
+    <div class="main-layout">
+    <!-- Left Column: Hooks with Checkboxes -->
+    <div class="left-column">
+        <section>
+        <h3>Agent Configuration</h3>
+
+        <h4>Available Hooks</h4>
+        <div class="hooks-list">
+            <div class="hook-item">
+            <input type="checkbox" id="before_agent" class="hook-checkbox">
+            <div class="hook-content">
+                <label for="before_agent" class="hook-item-title"><code data-hook="before_agent">before_agent</code></label>
+                <div class="hook-item-desc">Before agent starts (once per invocation).</div>
+            </div>
+            </div>
+
+            <div class="hook-item">
+            <input type="checkbox" id="before_model" class="hook-checkbox">
+            <div class="hook-content">
+                <label for="before_model" class="hook-item-title"><code data-hook="before_model">before_model</code></label>
+                <div class="hook-item-desc">Before each model call.</div>
+            </div>
+            </div>
+
+            <div class="hook-item">
+            <input type="checkbox" id="after_model" class="hook-checkbox">
+            <div class="hook-content">
+                <label for="after_model" class="hook-item-title"><code data-hook="after_model">after_model</code></label>
+                <div class="hook-item-desc">After each model response.</div>
+            </div>
+            </div>
+
+            <div class="hook-item">
+            <input type="checkbox" id="after_agent" class="hook-checkbox">
+            <div class="hook-content">
+                <label for="after_agent" class="hook-item-title"><code data-hook="after_agent">after_agent</code></label>
+                <div class="hook-item-desc">After agent completes (once per invocation).</div>
+            </div>
+            </div>
+        </div>
+
+        <h4 class="section-spacing">Other Configuration</h4>
+        <div class="hooks-list">
+            <div class="hook-item tools-item">
+            <input type="checkbox" id="tools" class="hook-checkbox" checked>
+            <div class="hook-content">
+                <label for="tools" class="hook-item-title"><code data-hook="tools">tools</code></label>
+                <div class="hook-item-desc">Tools available to the agent.</div>
+            </div>
+            </div>
+        </div>
+        </section>
+    </div>
+
+    <!-- Right Column: Agent Graph -->
+    <div class="right-column">
+        <div class="graph-wrapper">
+        <h3>Agent Graph</h3>
+        <div id="agent-graph">Loading...</div>
+        </div>
+    </div>
+    </div>
+</div>
+
+<script id="diagrams-python" src="./diagrams_python.js"></script>
+<script id="diagrams-js" src="./diagrams_js.js"></script>
+<script type="module">
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+
+let currentLanguage = 'python';
+let pythonDiagrams = {};
+let jsDiagrams = {};
+
+mermaid.initialize({
+    startOnLoad: false,
+    theme: 'default'
+});
+
+function detectLanguage() {
+    const path = window.location.pathname;
+    if (path.includes('/javascript') || path.includes('/js') || path.includes('/typescript')) {
+    return 'javascript';
+    }
+    if (path.includes('/python')) {
+    return 'python';
+    }
+
+    if (window.parent && window.parent !== window) {
+    try {
+        const parentPath = window.parent.location.pathname;
+        if (parentPath.includes('/javascript') || parentPath.includes('/js') || parentPath.includes('/typescript')) {
+        return 'javascript';
+        }
+        if (parentPath.includes('/python')) {
+        return 'python';
+        }
+    } catch (e) {
+        // Cross-origin iframe, can't access parent URL
+    }
+    }
+
+    const activeTab = document.querySelector('[data-language-tab].active, [data-tab].active');
+    if (activeTab) {
+    const lang = activeTab.getAttribute('data-language') || activeTab.getAttribute('data-tab') || '';
+    if (lang.match(/^(js|javascript|typescript|ts)$/i)) {
+        return 'javascript';
+    }
+    }
+
+    const visibleCode = document.querySelector('.language-typescript:not([hidden]), .language-javascript:not([hidden]), .language-js:not([hidden])');
+    if (visibleCode) {
+    return 'javascript';
+    }
+
+    return 'python';
+}
+
+function updateHookNames(lang) {
+    const hookElements = document.querySelectorAll('code[data-hook]');
+    const isJS = lang === 'javascript';
+
+    hookElements.forEach(el => {
+    const hook = el.getAttribute('data-hook');
+    if (hook === 'tools') return;
+
+    if (hook === 'before_agent') {
+        el.textContent = isJS ? 'beforeAgent' : 'before_agent';
+    } else if (hook === 'before_model') {
+        el.textContent = isJS ? 'beforeModel' : 'before_model';
+    } else if (hook === 'after_model') {
+        el.textContent = isJS ? 'afterModel' : 'after_model';
+    } else if (hook === 'after_agent') {
+        el.textContent = isJS ? 'afterAgent' : 'after_agent';
+    }
+    });
+}
+
+async function loadDiagrams() {
+    try {
+    const pythonResponse = await fetch('./diagrams_python.js');
+    const pythonText = await pythonResponse.text();
+    const pythonMatch = pythonText.match(/const diagrams = (\{.*\});/);
+    if (pythonMatch) {
+        pythonDiagrams = JSON.parse(pythonMatch[1]);
+    }
+
+    const jsResponse = await fetch('./diagrams_js.js');
+    const jsText = await jsResponse.text();
+    const jsMatch = jsText.match(/const diagrams = (\{.*\});/);
+    if (jsMatch) {
+        jsDiagrams = JSON.parse(jsMatch[1]);
+    }
+    } catch (e) {
+    console.error('Failed to load diagrams:', e);
+    pythonDiagrams = window.diagrams || {};
+    jsDiagrams = window.diagrams || {};
+    }
+
+    currentLanguage = detectLanguage();
+    updateHookNames(currentLanguage);
+    render();
+}
+
+function getKey() {
+    return [
+    document.getElementById('tools').checked ? '1' : '0',
+    document.getElementById('before_agent').checked ? '1' : '0',
+    document.getElementById('before_model').checked ? '1' : '0',
+    document.getElementById('after_model').checked ? '1' : '0',
+    document.getElementById('after_agent').checked ? '1' : '0',
+    ].join('');
+}
+
+async function render() {
+    const key = getKey();
+    const graphEl = document.getElementById('agent-graph');
+
+    const diagrams = currentLanguage === 'javascript' ? jsDiagrams : pythonDiagrams;
+
+    if (!diagrams[key]) {
+    graphEl.innerHTML = `<div style="color: #e53e3e;">Diagram not found for key: ${key}<br>Language: ${currentLanguage}<br>Available keys: ${Object.keys(diagrams).length > 0 ? Object.keys(diagrams).slice(0, 5).join(', ') + '...' : 'none loaded'}</div>`;
+    return;
+    }
+
+    try {
+    const id = `mermaid-${Date.now()}`;
+    const { svg } = await mermaid.render(id, diagrams[key]);
+    graphEl.innerHTML = svg;
+    } catch (error) {
+    graphEl.innerHTML = `<div style="color: #e53e3e;">Render error: ${error.message}</div>`;
+    }
+}
+
+function initializeWidget() {
+    loadDiagrams();
+    document.querySelectorAll('.hook-checkbox').forEach((input) => {
+    input.addEventListener('change', render);
+    });
+
+    document.addEventListener('click', (e) => {
+    if (e.target.matches('[data-language-tab], [data-tab]')) {
+        setTimeout(() => {
+        const newLang = detectLanguage();
+        if (newLang !== currentLanguage) {
+            currentLanguage = newLang;
+            updateHookNames(currentLanguage);
+            render();
+        }
+        }, 50);
+    }
+    });
+}
+
+window.addEventListener('DOMContentLoaded', initializeWidget);
+if (typeof document$ !== 'undefined') {
+    document$.subscribe(initializeWidget);
+}
+</script>
diff --git a/tests/unit_tests/test_builder.py b/tests/unit_tests/test_builder.py
index 6ce5d874e..e7d485d2a 100644
--- a/tests/unit_tests/test_builder.py
+++ b/tests/unit_tests/test_builder.py
@@ -37,6 +37,7 @@ def test_builder_initialization() -> None:
             ".yaml",
             ".css",
             ".js",
+            ".html",
         }
 
 

From 460b2992c1416795c9cf61619e27829a1bf8f111 Mon Sep 17 00:00:00 2001
From: Sydney Runkle <sydneymarierunkle@gmail.com>
Date: Tue, 14 Oct 2025 13:31:56 -0400
Subject: [PATCH 2/2] moving

---
 src/oss/langchain/agents.mdx     | 19 ++++++++++++++++
 src/oss/langchain/middleware.mdx | 38 ++++++++++++++++++++++----------
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/oss/langchain/agents.mdx b/src/oss/langchain/agents.mdx
index 32d14582b..a6ae27480 100644
--- a/src/oss/langchain/agents.mdx
+++ b/src/oss/langchain/agents.mdx
@@ -746,3 +746,22 @@ For comprehensive middleware documentation including decorators like `@before_mo
 For comprehensive middleware documentation including hooks like `beforeModel`, `afterModel`, and `wrapToolCall`, see [Middleware](/oss/langchain/middleware).
 </Tip>
 :::
+
+### Visualizing agents
+
+The interactive widget below shows how middleware hooks integrate into the agent execution flow. Toggle different hook combinations to see how they affect the agent's graph structure:
+
+<iframe
+  src="/plugins/middleware_visualization/index.html"
+  style={{ width: "100%", height: "600px", border: "none" }}
+  title="Interactive Middleware Visualizer"
+/>
+
+This visualization helps you understand:
+- Where each middleware hook executes in the agent lifecycle
+- How multiple middleware components interact
+- The execution order of before/after hooks vs wrap-style hooks
+
+<Tip>
+For detailed documentation on each hook type and how to implement custom middleware, see [Middleware](/oss/langchain/middleware).
+</Tip>
diff --git a/src/oss/langchain/middleware.mdx b/src/oss/langchain/middleware.mdx
index aa943a217..19f1fcb33 100644
--- a/src/oss/langchain/middleware.mdx
+++ b/src/oss/langchain/middleware.mdx
@@ -971,15 +971,27 @@ agent = create_agent(
 
 #### Node-style hooks
 
-Run at specific points in the execution flow.
+Run at specific points in the execution flow. Each hook receives the current state and runtime, and can optionally return state updates or jump commands.
 
-**Try it:** The interactive widget below shows all available hooks and lets you toggle different combinations to see how they affect the agent execution graph:
+**Available hooks:**
 
-<iframe
-  src="/plugins/middleware_visualization/index.html"
-  style={{ width: "100%", height: "600px", border: "none" }}
-  title="Interactive Middleware Visualizer"
-/>
+:::python
+- `before_agent` - Runs once when the agent starts, before any processing begins. Use for initialization, logging, or validating inputs.
+- `before_model` - Runs before each model call. Use for context injection, message trimming, or pre-processing prompts.
+- `after_model` - Runs after each model response. Use for validation, content filtering, or logging model outputs.
+- `after_agent` - Runs once when the agent completes, after all processing is done. Use for cleanup, final validation, or result transformation.
+:::
+
+:::js
+- `beforeAgent` - Runs once when the agent starts, before any processing begins. Use for initialization, logging, or validating inputs.
+- `beforeModel` - Runs before each model call. Use for context injection, message trimming, or pre-processing prompts.
+- `afterModel` - Runs after each model response. Use for validation, content filtering, or logging model outputs.
+- `afterAgent` - Runs once when the agent completes, after all processing is done. Use for cleanup, final validation, or result transformation.
+:::
+
+<Tip>
+Want to see how these hooks fit into the agent execution flow? Check out the [interactive visualization in the agents documentation](/oss/langchain/agents#visualizing-agents).
+</Tip>
 
 **Example: Logging middleware**
 
@@ -1066,16 +1078,18 @@ const createMessageLimitMiddleware = (maxMessages: number = 50) => {
 
 #### Wrap-style hooks
 
-Intercept execution and control when the handler is called:
+Intercept execution and control when the handler is called. These hooks wrap around the actual execution and give you complete control over whether and how the handler runs.
+
+**Available hooks:**
 
 :::python
-- `wrap_model_call` - Around each model call
-- `wrap_tool_call` - Around each tool call
+- `wrap_model_call` - Wraps around each model call. Receives a `ModelRequest` and handler function. Use for retry logic, caching, dynamic model selection, or request/response transformation.
+- `wrap_tool_call` - Wraps around each tool call. Receives a `ToolCallRequest` and handler function. Use for tool error handling, logging tool execution, or modifying tool inputs/outputs.
 :::
 
 :::js
-- `wrapModelCall` - Around each model call
-- `wrapToolCall` - Around each tool call
+- `wrapModelCall` - Wraps around each model call. Receives a request object and handler function. Use for retry logic, caching, dynamic model selection, or request/response transformation.
+- `wrapToolCall` - Wraps around each tool call. Receives a request object and handler function. Use for tool error handling, logging tool execution, or modifying tool inputs/outputs.
 :::
 
 You decide if the handler is called zero times (short-circuit), once (normal flow), or multiple times (retry logic).