# Formeln, Diagramme, Code und Rechnen

LaTeX-Formeln, Mermaid-Diagramme und Codeblöcke mit Hervorhebung, Rechnen direkt im Text und Kennzahlen aus Datenbanken.

## Formeln, Diagramme und Code

- **Formeln** in LaTeX: Block mit `/math`, im Text mit `/inlinemath`. Die Vorschau erscheint beim Tippen. Über dem Eingabefeld stehen Bausteine wie Bruch, Wurzel, Hoch- und Tiefstellung, Vektor, Kreuzprodukt, ±, π und Summe.
- **Brüche** fügt `/Bruch` als Formel im Satz ein.
- **Mermaid-Diagramme**: Klick oder <kbd>Enter</kbd> öffnet Quelltext und Vorschau. Bis 20.000 Zeichen und 500 Kanten. Im dunklen Modus werden Mermaid-Diagramme dunkel gezeichnet, beim Wechsel des Modus neu; Downloads (SVG/PNG) und Ausdrucke bleiben hell.
- **draw.io-Diagramme** (`/drawio`): öffnen den Editor von draw.io in einem großen Fenster; **Speichern** übernimmt das Diagramm als einen Schritt, den du rückgängig machen kannst. Doppelklick, <kbd>Enter</kbd> oder der Stift am Block öffnen es wieder. Gespeichert werden die Zeichnung und ein Bild davon: Beim Ansehen – auch auf geteilten Seiten, in Präsentationen und offline – lädt Flowplan draw.io gar nicht, es zeigt nur das Bild (bereinigt, ohne Skripte und ohne Inhalte von außen). Zeichnung und Bild dürfen je bis 800 kB groß sein.
  - **Maximieren:** Der Knopf mit den Pfeilen oben rechts im Fenster (neben dem Schließen-Knopf) vergrößert draw.io auf das ganze Browserfenster, derselbe Knopf (**Verkleinern**) holt das Fenster zurück. Er lässt sich auch per Tastatur bedienen. Das Diagramm bleibt dabei offen, ungespeicherte Änderungen gehen nicht verloren; <kbd>Esc</kbd> und **Schließen** fragen wie gewohnt, bevor sie Änderungen verwerfen. Die Wahl merkt sich das Gerät: Das nächste Diagramm öffnet so, wie du das letzte verlassen hast. Auf dem Telefon füllt draw.io den Bildschirm ohnehin (Notch und Home-Leiste bleiben frei), dort gibt es den Knopf nicht.
  - **Eine Seite für ein Diagramm:** Die Vorlage **Diagramm-Seite** (unter [Vorlagen](/templates#startervorlagen), Kategorie *Wissen & Dokumentation*) legt eine Seite in voller Breite mit einem leeren draw.io-Diagramm an und öffnet draw.io gleich. Auf einer Seite in voller Breite nutzt das gespeicherte Bild die ganze Breite, und ein leeres Diagramm ist eine große Fläche statt eines schmalen Streifens. Eine eigene Seitenart wie beim Whiteboard gibt es dafür nicht – die Diagramm-Seite ist ein Dokument, du kannst also Text, weitere Diagramme oder andere Blöcke dazuschreiben.
  - **Wo draw.io läuft:** Ohne Einstellung nutzt Flowplan `embed.diagrams.net`. Während du zeichnest, geht der Inhalt des Diagramms an diesen Dienst; das Fenster weist darauf hin. Mit `DRAWIO_URL` zeigt die Instanz auf ein eigenes draw.io (etwa den Container `jgraph/drawio`), dann bleibt alles bei dir (siehe [Konfiguration](/configuration-storage#rechtliches-und-oberflaeche)).
  - **Aussehen:** unter **Einstellungen → Darstellung → Editor**: **draw.io-Design** *Automatisch* (folgt Flowplan), *Hell* oder *Dunkel* und **draw.io-Oberfläche** *Standard*, *Minimal* oder *Skizze*. Die Wahl gilt für dieses Gerät.
  - **Export:** Im ZIP-Export wird jedes Diagramm eine Datei `.drawio.svg`, die draw.io wieder öffnen kann; in einer einzelnen Markdown-Datei und im Git-Export steht es als Block ` ```drawio ` mit der Zeichnung, den der Import wieder zum Diagramm macht (das Bild entsteht beim nächsten Speichern). PDF und EPUB zeigen das Bild.
- **Codeblöcke**: Die Sprache steht im Kopf des Blocks mit ihrem vollen Namen („JavaScript“, „C++“, „Angular TypeScript“, „Klartext“). Ein Klick öffnet eine Liste mit Suche – sie findet Namen, Kürzel und Dateiendungen (`ts`, `py`, `yml`, `tf`, `.rs` …). Oben stehen die Sprachen, die du zuletzt gewählt hast (in diesem Browser gemerkt). Zur Auswahl stehen über 240 Sprachen mit denselben Grammatiken wie in VS Code – darunter Svelte, Vue, Astro, JSX/TSX, Terraform, TOML, Typst, Zig, Prisma, GDScript, Nushell, Systemd-Units, SSH-Konfiguration, Git-Commit-Nachrichten, Logdateien, CSV/TSV und .env-Dateien. **Zeilenumbruch** und **Kopieren** stehen bereit. <kbd>Tab</kbd> rückt um zwei Leerzeichen ein.
- **Sprache erkennen**: Fügst du Code in einen Block ohne Sprache (Klartext) ein, schlägt Flowplan eine Sprache vor, wenn sie eindeutig erkennbar ist – „Sieht aus wie Python – übernehmen?“. Ein Klick übernimmt sie, das × blendet den Vorschlag aus. Von selbst ändert Flowplan die Sprache nie.
- **Vorschau**: Codeblöcke in HTML, SVG (Sprache XML mit `<svg>`), Markdown, Mermaid, LaTeX und Typst zeigen im Kopf den Schalter **Code / Vorschau / Geteilt**. *Geteilt* stellt Code und Vorschau nebeneinander, auf dem Telefon untereinander. Die Ansicht wird im Block gespeichert; wer eine Seite nur liest (Leserechte, veröffentlichte Seiten, Präsentationen), sieht ohne eigene Einstellung des Blocks die Vorschau und kann für sich umschalten, ohne etwas zu ändern. Fehler (etwa ein Tippfehler im Diagramm oder in Typst, mit Zeilennummer) erscheinen an Stelle der Vorschau.
  - **HTML** läuft in einem abgeschotteten Rahmen: keine Skripte, keine Formulare, kein Zugriff auf Flowplan oder das Netz. Bilder aus dem Netz bleiben leer, eingebettete Bilder (`data:`) und Stile funktionieren. Die Höhe passt sich dem Inhalt an.
  - **SVG**, **Mermaid** und **Typst** erscheinen als Bild – ohne Skripte und Links.
  - **Markdown** wird wie beim Import umgesetzt, **LaTeX** zeigt Formeln mit KaTeX (durch Leerzeilen getrennt, mit oder ohne `$$ … $$`; ganze LaTeX-Dokumente mit `\documentclass` nicht).
  - **Typst** wird beim ersten Mal nachgeladen (einige MB, vom eigenen Server, nicht aus dem Netz); Typst-Pakete (`@preview/…`) und Dateien stehen nicht zur Verfügung.
  - Neue Mermaid-Codeblöcke (` ```mermaid ` oder Sprache *Mermaid* gewählt) zeigen gleich das Diagramm, leere Blöcke Code und Diagramm nebeneinander. Den eigenständigen Mermaid-Block (`/mermaid`) gibt es weiterhin.
- **Zeilennummern**: Das Menü **…** im Kopf eines Codeblocks schaltet **Zeilennummern** für diesen Block ein oder aus, legt die **erste Zeilennummer** fest (etwa 10 für einen Ausschnitt) und **hebt Zeilen hervor** – z. B. `3-5, 8`, gezählt wie angezeigt. Die Nummern lassen sich nicht markieren und werden nicht mitkopiert; bei Zeilenumbruch stehen sie an der ersten Zeile eines umbrochenen Zeilenstücks. Für Blöcke ohne eigene Einstellung gilt **Einstellungen → Darstellung & Sprache → Editor → Zeilennummern standardmäßig anzeigen** (auf diesem Gerät).
- **Einklappen**: Codeblöcke mit mehr als 25 Zeilen erscheinen eingeklappt – 10 Zeilen hoch, darin scrollbar, unten ausgeblendet. **Alle N Zeilen anzeigen** klappt sie auf, **Einklappen** wieder zu (beides per Tastatur erreichbar). Wer bearbeiten darf, speichert den Zustand im Block; Lesende klappen nur für sich auf. Im Menü **…** lassen sich **Eingeklappt** und die **Höhe eingeklappt** (5, 10, 15, 20 oder 30 Zeilen) einstellen. Drucken und alle Exporte zeigen immer den ganzen Code.
- Die Hervorhebung einer Sprache wird beim ersten Codeblock dieser Sprache nachgeladen; bis dahin steht der Code kurz ohne Farben da. Sehr lange Codeblöcke (über 50 000 Zeichen) bleiben ohne Hervorhebung.

![Ein Markdown-Codeblock in der geteilten Ansicht: links der Code mit Zeilennummern und einer hervorgehobenen Zeile, rechts die gerenderten Release Notes](/screenshots/code-preview.webp "Ein Codeblock in Markdown, mit Zeilennummern, hervorgehobener Zeile und der Vorschau daneben.")

## Rechnen im Text

Flowplan rechnet nur, wenn du es möchtest – exakt mit Brüchen, in deutscher Schreibweise (`2,5`, `2.400`, `3 : 4`, `×`, `²`, `√`, `€`):

- **Hinweis nach „=“**: Tippst du eine Rechnung und dann `=`, etwa `12 × 2.400 € =` oder `3/4 + 1/6 =`, erscheint das Ergebnis grau dahinter. <kbd>Tab</kbd> übernimmt es, <kbd>Esc</kbd> oder Weiterschreiben verwirft es.
- **Markierter Text**: Markiere eine Rechnung, einen Term oder eine Gleichung; das Textmenü (auch per Rechtsklick) zeigt unter **Rechnen**, was möglich ist, und fügt das Ergebnis per Klick dahinter ein:
  - **Ergebnis** und **Kürzen** als exakter Bruch, dazu **Als Dezimalzahl** – `12/18 = 2/3`
  - **Ausmultiplizieren**, auch die binomischen Formeln – `(a + b)² = a² + 2ab + b²`
  - **Faktorisieren** – `x² − 9 = (x − 3)(x + 3)`, `4x² − 12x + 9 = (2x − 3)²`, `6x² + 9x = 3x(2x + 3)`, auch mit mehreren Variablen: `a³ − b³ = (a − b)(a² + ab + b²)`, `x² + 2xy + y² − 1 = (x + y − 1)(x + y + 1)`, durch Ausklammern in Gruppen `ax + ay + bx + by = (x + y)(a + b)`; **Faktorisieren mit Wurzeln** zerlegt weiter in reelle Faktoren: `x² − 2 = (x − √2)(x + √2)`
  - **Vereinfachen** von Bruchtermen – `(x² − 1)/(x − 1) = x + 1`, `1/x + 1/(x + 1) = (2x + 1)/(x(x + 1))`
  - **Nach x auflösen** – lineare und quadratische Gleichungen exakt (`x² + 2x − 4 = 0 ⇒ x = −1 ± √5`), höhere Grade exakt, wo es geht (`x³ = 2 ⇒ x = ∛2`, `x⁴ − 5x² + 6 = 0 ⇒ x = ±√2, ±√3`), sonst als gerundete Dezimalzahlen (`x³ + x − 1 = 0 ⇒ x ≈ 0,682328`); bei mehreren Variablen nach jeder, die linear vorkommt. Gleichungen mit x im Nenner werden mit dem Hauptnenner gelöst; Werte, für die ein Nenner 0 wäre, entfallen und werden genannt (`x/(x − 1) = 1/(x − 1) ⇒ keine Lösung (x = 1 entfällt)`).
  - **Ergebnis kopieren**: Der Knopf am Ende jeder Ergebniszeile kopiert das Ergebnis so, wie es angezeigt wird (etwa `y² − 16y + 64`), als Text in die Zwischenablage – zum Einfügen in andere Apps. Ein Klick auf die Zeile selbst fügt es weiterhin hinter der Auswahl ein.
- **Funktionsgraph**: Markiere einen Term mit x, etwa `x² − 2` oder `f(x) = 2x + 1`, und wähle im Textmenü **Graph zeichnen** – darunter erscheint ein Graph mit Achsen, Gitter und markierten Nullstellen. Auch `/Funktionsgraph` fügt einen ein. Unter dem Graphen stehen die Funktionen zum Bearbeiten: Der Graph ändert sich beim Tippen, **+ Funktion** fügt bis zu sechs Funktionen in eigenen Farben hinzu (`sin(x)`, `cos`, `tan`, `exp`, `ln`, `abs`, `√` und `π` sind möglich). Ziehen verschiebt den Ausschnitt, **+**/**−** oder <kbd>⌘</kbd>/<kbd>Strg</kbd> + Scrollen zoomen, **⟲** stellt die Ansicht zurück. Auf veröffentlichten Seiten lässt sich der Graph verschieben und zoomen, aber nicht ändern.
- **Vektoren**: Schreibe Vektoren als `(1 | 2 | 3)`, `(1; 2; 3)` oder `(1, 2, 3)` – in deutscher Schreibweise ist ein Komma zwischen Ziffern sonst ein Dezimalkomma, `(1,5; 2)` ist also (1,5 | 2). Flowplan rechnet Summen und Vielfache (`2 · (1; −2) − (3; 1) = (−1; −5)`), das **Skalarprodukt** mit `·` samt **Winkel** (`(1; 0) · (0; 1) = 0 ⇒ ∠ = 90°`), das **Kreuzprodukt** mit `×` (`(1|0|0) × (0|1|0) = (0 | 0 | 1)`) und den **Betrag** mit `|…|` (`|(1; 1)| = √2`). Ein markierter Vektor allein zeigt seinen Betrag und den **Einheitsvektor** (`(3; 4) ⇒ v⁰ = (3/5; 4/5)`). **Vektoren zeichnen** im Textmenü stellt Vektoren der Ebene als Pfeile im Koordinatensystem dar – bei `(1; 2) + (3; 1)` beide Vektoren und ihre Summe. Im Graphen lassen sich weitere Vektoren wie `(3; 2)` neben Funktionen eintragen. **Vektoren im Raum** wie `(1 | 2 | 3)` – auch Kreuzprodukte – zeichnet Flowplan in einem 3D-Koordinatensystem mit x-, y- und z-Achse, Bodenraster und gestrichelten Hilfslinien zum Boden; **Ziehen dreht die Ansicht**, die Drehung wird mit der Seite gespeichert. Im Formel-Editor gibt es die Bausteine **Vektor** (Spaltenvektor), **Vektorpfeil** und **Kreuzprodukt**; Spaltenvektoren in Formeln werden genauso berechnet.
- **In Formeln**: Der Formel-Editor zeigt dieselben Möglichkeiten unter **Rechnen** und hängt das Ergebnis in LaTeX an, etwa `\frac{3}{4} + \frac{1}{6} = \frac{11}{12}`.

## Dashboards und Kennzahlen

**/Kennzahl** fügt eine Karte mit einer Zahl aus einer Datenbank ein, **/Dashboard** gleich drei nebeneinander. Über das Zahnrad wählst du:

- die **Datenbank** (alle Datenbanken des Arbeitsbereichs, die du lesen darfst),
- optional eine **Ansicht** – dann zählen nur die Einträge, die ihre Filter zeigen, etwa „Offene Tickets“,
- die **Berechnung**: Anzahl Einträge, Summe, Durchschnitt, Minimum oder Maximum einer Zahl-, Formel- oder Rollup-Eigenschaft,
- eine **Beschriftung**.

Die Zahl rechnet der Server für die Person aus, die die Seite ansieht, und aktualisiert sie jede Minute; private Einträge zählen nur für die, die sie sehen dürfen. Auf veröffentlichten Seiten sehen Besucher ohne Zugriff einen Strich. Diagramme kommen dazu, indem du unter den Kennzahlen eine **verknüpfte Datenbank** einfügst und dort eine Diagramm-Ansicht wählst – so entsteht ein Dashboard aus mehreren Datenbanken.