docs: replace ASCII diagrams with Mermaid/lists, add linting note

CI enforces ascii-guard linting on docs. Replaced ASCII box diagrams
with Mermaid flowcharts (open-webui architecture) and numbered lists
(CLI layout). Added diagram linting note to website README.

Based on PR #2364 by aydnOktay (closed — README had broken formatting).
This commit is contained in:
Teknium
2026-03-21 17:58:30 -07:00
parent 7dff34ba4e
commit e664bc7632
3 changed files with 20 additions and 22 deletions

View File

@@ -39,3 +39,7 @@ GIT_USER=<Your GitHub username> yarn deploy
``` ```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
## Diagram Linting
CI runs `ascii-guard` to lint docs for ASCII box diagrams. Use Mermaid (````mermaid`) or plain lists/tables instead of ASCII boxes to avoid CI failures.

View File

@@ -170,22 +170,16 @@ The default implementation returns:
## Layout diagram ## Layout diagram
``` The default layout from top to bottom:
┌─────────────────────────────────────────┐
│ (output scrolls here) │ 1. **Output area** — scrolling conversation history
│ │ 2. **Spacer**
│ spacer ────────│ 3. **Extra widgets** — from `_get_extra_tui_widgets()`
│ ★ Your extra widgets appear here ★ │ 4. **Status bar** — model, context %, elapsed time
├─────────────────────────────────────────┤ 5. **Image bar** — attached image count
│ ⚕ claude-sonnet-4 · 42% · 2m status │ 6. **Input area** — user prompt
├─────────────────────────────────────────┤ 7. **Voice status** — recording indicator
│ 📎 2 images image bar│ 8. **Completions menu** — autocomplete suggestions
your input here input area │
├─────────────────────────────────────────┤
│ 🎤 Voice mode: listening voice status │
│ ▸ completions... autocomplete │
└─────────────────────────────────────────┘
```
## Tips ## Tips

View File

@@ -10,12 +10,12 @@ description: "Connect Open WebUI to Hermes Agent via the OpenAI-compatible API s
## Architecture ## Architecture
``` ```mermaid
┌──────────────────┐ POST /v1/chat/completions ┌──────────────────────┐ flowchart LR
Open WebUI │ ──────────────────────────────► │ hermes-agent │ A["Open WebUI<br/>browser UI<br/>port 3000"]
(browser UI) │ SSE streaming response │ gateway API server B["hermes-agent<br/>gateway API server<br/>port 8642"]
port 3000 │ ◄────────────────────────────── │ port 8642 │ A -->|POST /v1/chat/completions| B
└──────────────────┘ └──────────────────────┘ B -->|SSE streaming response| A
``` ```
Open WebUI connects to Hermes Agent's API server just like it would connect to OpenAI. Your agent handles the requests with its full toolset — terminal, file operations, web search, memory, skills — and returns the final response. Open WebUI connects to Hermes Agent's API server just like it would connect to OpenAI. Your agent handles the requests with its full toolset — terminal, file operations, web search, memory, skills — and returns the final response.