Formeln, Diagramme, Code und Rechnen

#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 Enter ö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, Enter 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; Esc 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, 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).
  • 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. Tab 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.

#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. Tab übernimmt es, Esc 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 ⌘/Strg + 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.