Files
d4rkbot/docs/idee-mermaid.md
T
D4rkst3randClaude Opus 5 4e7fc99999
Deploy / check (push) Has been cancelled
Deploy / deploy (push) Has been cancelled
Server-Seite ueberarbeitet, und die Spielauswahl kommt jetzt aus gamedig
LS25 fehlte, aber nicht nur LS25: die Auswahl im Panel war eine von Hand
gepflegte Liste mit neunzehn Eintraegen, und fuenf davon gab es bei gamedig
gar nicht — "arkse", "ark", "sevendaystodie", "minecraftbe" und "terraria".
Wer eines davon auswaehlte, bekam einen Server, der dauerhaft offline stand,
ohne dass irgendwo ein Grund stand. Die echten IDs heissen ase, sdtd, mbe und
terrariatshock.

Also nicht LS25 nachtragen, sondern die Liste abschaffen: sie kommt jetzt aus
gamedig selbst, 360 Eintraege, sortiert, mit Suche. Jedes Update bringt neue
Spiele automatisch mit. Dazu der Standard-Query-Port als Vorschlag, sobald man
ein Spiel waehlt. Bestehende Eintraege mit den toten IDs werden beim Start
einmalig umgebogen.

Farming Simulator hat noch eine zweite Huerde: der Server antwortet nur mit
Zugangs-Code, und den hat queryServer nie durchgereicht. LS25 waere also auch
mit richtiger ID offline geblieben. Jetzt gibt es eine Spalte dafuer, das Feld
erscheint nur bei Spielen, die einen brauchen (Farming Simulator, Terraria —
bei Satisfactory optional), und Speichern ohne Code wird abgelehnt statt
stillschweigend hingenommen. Der Code steht nicht in der oeffentlichen API.

Nebenbei aufgefallen: input[type=password] war im CSS nirgends erfasst. Das
erste solche Feld kam voellig ungestylt daher.

Die /server-Seite dazu:

- Auslastungs-Balken mit eigener Farbe statt des XP-Balkens vom Level-System.
  Gruen frei, gelb ab 80 Prozent, rot voll — die Zahl steht rechtsbuendig,
  mittig laege sie bei 50 Prozent genau auf der Fuellkante.
- Map, Version und Ping als Chips. Vorher standen sie mit Punkten getrennt in
  der Statuszeile und wurden auf dem Handy zu Brei.
- Wer gerade drauf ist. Die Namen holt der Monitor ohnehin schon fuers Embed,
  auf der Seite standen sie nur nirgends.
- Welches Spiel es ueberhaupt ist. Das stand nirgends ausser im Emoji.
- Offline-Karten waren bisher leer bis auf das Wort. Jetzt steht dort, seit
  wann — soweit der Verlauf reicht, sonst gar nichts statt einer Schaetzung.
- Zeitachse und Peak-Linie am Verlauf. Eine Flaeche ohne Bezugspunkt sagt
  nicht, wie hoch hoch ist.
- Plaetze insgesamt in der Uebersicht oben.

Geprueft: Token speichern und aendern, Spielnamen inklusive unbekannter ID,
Token-Bedarf pro Protokoll, Liste ohne Doppler, alle Icon-Schluessel gegen
gamedig, "zuletzt online" ignoriert Offline-Proben, und die Migration mit einer
Datenbank im alten Stand. Beide Seiten am laufenden Frontend angesehen, auch
auf Handybreite.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-05 16:52:09 +02:00

1.9 KiB

Mermaid-Diagramme im eigenen Markdown rendern

Worum es geht

Diagramme (Produktionsketten, Abläufe, Zustandsgraphen) sollen auf den eigenen Seiten erscheinen — nicht nur als Bild, sondern als Text, der mit dem Rest mitläuft und diffbar bleibt.

Gitea 1.26.4 rendert Mermaid bereits, die Spiel-Doku braucht also nichts. Was fehlt, ist der Weg nach draußen: auf den Hub, ins Devlog, auf eine öffentliche Seite. Das kann kein externes Werkzeug übernehmen.

Ausdrücklich nicht Teil davon: ein eigener Editor. mermaid.live ist vom selben Team, MIT-lizenziert, kostenlos und ohne Konto. Ihn nachzubauen bringt nichts außer Wartung. Geschrieben wird dort, gerendert wird hier.

Was zu tun ist

  1. Code-Blöcke im Mini-Markdown. frontend/src/markdown.jsx kennt heute nur `inline code` — eingezäunte Blöcke (```) gar nicht. Das ist die Voraussetzung für alles Weitere und für sich schon eine Lücke.
  2. ```mermaid abzweigen und an einen eigenen Renderer geben.
  3. Bibliothek per import() nachladen. Mermaid ist als npm-Paket 83 MB entpackt; im Browser landet weniger, es bliebe aber der größte Brocken. Das Frontend ist im Ganzen gerade ~540 kB — das darf nur zahlen, wer eine Seite mit Diagramm öffnet.
  4. Fehlerfall bedenken: kaputte Syntax darf die Seite nicht killen, sondern zeigt den Quelltext als Code-Block.
  5. Beide Themes. Mermaid bringt eigene Farben mit; die müssen an die CSS-Variablen der Seite.

Wo es wirkt

markdown.jsx hängt an neun Stellen: Changelog, DevlogDetail, Devlogs, Events, Home, Roadmap, Seite (freier Seiten-Editor), Settings und dem Composer-Vorschau. Der eigentliche Anwendungsfall ist der Seiten-Editor — dort entsteht der Text, in dem ein Diagramm Sinn ergibt.

Aufwand

Ein Nachmittag. Kein Projekt.

Offen

Lohnt sich das Megabyte? Nur, wenn Diagramme wirklich auf öffentliche Seiten sollen. Reine Eigen-Doku ist mit Gitea schon abgedeckt.