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:
@@ -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.
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|||||||
Reference in New Issue
Block a user