Replace remaining ASCII diagrams with SVG images

- Add interfaces-overview.svg for interfaces.md
- Add protocol-translation.svg for armory.md
- Add anvil-ui-mockup.svg for anvil.md

Author: kashifpk

docs/anvil.md

@@ -73,27 +73,8 @@ anvil ui --port 5000
 
 Open [http://localhost:5000](http://localhost:5000) in your browser.
 
-<div class="architecture-diagram">
-<pre>
-+------------------------------------------------------------------+
-|  Anvil Web UI                                        [Connect]   |
-+------------------------------------------------------------------+
-|  Server: http://localhost:8000/mcp              [Connected]      |
-+------------------------------------------------------------------+
-|                                                                  |
-|  Tools (4)                    | Tool: get_current_weather        |
-|  +--------------------------+ | +------------------------------+ |
-|  | get_current_weather      | | | Description:                 | |
-|  | get_forecast             | | | Get current weather for city | |
-|  | get_air_quality          | | |                              | |
-|  | geocode                  | | | Parameters:                  | |
-|  +--------------------------+ | | - city (string, required)    | |
-|                               | | - units (string, optional)   | |
-|  Resources (0)                | |                              | |
-|  Prompts (0)                  | | [Execute Tool]               | |
-|                               | +------------------------------+ |
-+------------------------------------------------------------------+
-</pre>
+<div class="diagram-container">
+  <img src="/diagrams/anvil-ui-mockup.svg" alt="Anvil Web UI" style="max-width: 100%; height: auto;" />
 </div>
 
 ## Example: Testing mcp-weather

docs/armory.md

@@ -57,21 +57,8 @@ async with agent.run_mcp_servers():
 
 The Armory translates between different protocol formats automatically:
 
-<div class="architecture-diagram">
-<pre>
-Model outputs (trained format)     Pydantic AI          Armory translates
-───────────────────────────────    normalizes           to backend format
-
-┌─────────────────────┐           ┌──────────────┐     ┌──────────────┐
-│ GPT-4:              │           │              │     │              │
-│ tool_calls[].func.. │──┐        │   Internal   │     │  → MCP       │
-└─────────────────────┘  │        │   Schema     │     │  → REST      │
-                         ├───────>│   (unified)  │────>│  → OpenAI FC │
-┌─────────────────────┐  │        │              │     │  → Local     │
-│ Claude:             │──┤        │              │     │              │
-│ tool_use.{name,in.. │  │        └──────────────┘     └──────────────┘
-└─────────────────────┘  │
-</pre>
+<div class="diagram-container">
+  <img src="/diagrams/protocol-translation.svg" alt="Protocol Translation" style="max-width: 100%; height: auto;" />
 </div>
 
 ### Result Transformation (JSON → TOON)

docs/interfaces.md

@@ -4,24 +4,8 @@ Multiple ways to interact with Agentic Forge: CLI for terminal users, WebSocket
 
 ## Interface Overview
 
-<div class="architecture-diagram">
-<pre>
-┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐
-│     CLI      │  │   Web Chat   │  │  Admin UI    │  │   Python     │
-│  (terminal)  │  │     UI       │  │(Armory mgmt) │  │    SDK       │
-└──────┬───────┘  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘
-       │                 │                 │                 │
-       │ (subprocess)    │ (WebSocket)     │ (REST)          │ (import)
-       │                 │                 │                 │
-       ▼                 ▼                 ▼                 ▼
-┌────────────────────────────────────────────────────────────────────┐
-│                       ORCHESTRATOR API                              │
-│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐              │
-│  │  WebSocket   │  │     SSE      │  │   Python     │              │
-│  │  (bi-direct) │  │  (streaming) │  │   Import     │              │
-│  └──────────────┘  └──────────────┘  └──────────────┘              │
-└────────────────────────────────────────────────────────────────────┘
-</pre>
+<div class="diagram-container">
+  <img src="/diagrams/interfaces-overview.svg" alt="Interface Overview" style="max-width: 100%; height: auto;" />
 </div>
 
 ## Why WebSocket over REST?