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

View File

@@ -10,12 +10,12 @@ description: "Connect Open WebUI to Hermes Agent via the OpenAI-compatible API s
## Architecture
```
┌──────────────────┐ POST /v1/chat/completions ┌──────────────────────┐
Open WebUI │ ──────────────────────────────► │ hermes-agent │
(browser UI) │ SSE streaming response │ gateway API server
port 3000 │ ◄────────────────────────────── │ port 8642 │
└──────────────────┘ └──────────────────────┘
```mermaid
flowchart LR
A["Open WebUI<br/>browser UI<br/>port 3000"]
B["hermes-agent<br/>gateway API server<br/>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.