{"id":2892,"date":"2026-10-16T10:43:10","date_gmt":"2026-10-16T02:43:10","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/de\/releases\/free-mermaid-use-case-diagram-editor\/"},"modified":"2026-10-16T10:43:10","modified_gmt":"2026-10-16T02:43:10","slug":"free-mermaid-use-case-diagram-editor","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/de\/releases\/free-mermaid-use-case-diagram-editor\/","title":{"rendered":"Kostenloser Use-Case-Diagramm-Editor: Mermaid-Unterst\u00fctzung in VPasCode"},"content":{"rendered":"

\"Mermaid-Use-Case-Diagramme<\/p>\n

Use-Case-Diagramme<\/a> helfen Teams dabei zu erkl\u00e4ren, wie Personen und externe Systeme mit den Funktionen eines Systems interagieren. Jetzt k\u00f6nnen Sie sie in Mermaid erstellen und in VPasCode vorschauen. Diese neue Funktion erweitert die Diagramm-as-Code-Unterst\u00fctzung von VPasCode und bietet Ihnen eine weitere M\u00f6glichkeit, das Systemverhalten durch Text zu beschreiben, anstatt jedes Element von Hand zu zeichnen.<\/p>\n

Verwenden Sie Mermaid bereits f\u00fcr technische Dokumentation? Sie k\u00f6nnen VPasCode jetzt als Mermaid-Diagramm-Editor<\/strong> f\u00fcr Use-Case-Diagramme neben den anderen unterst\u00fctzten Diagrammtypen verwenden. Wenn Sie nach einem kostenlosen Use-Case-Diagramm-Editor<\/strong> suchen, um Mermaid-Syntax in ein visuelles Diagramm umzuwandeln, probieren Sie es im VPasCode-Editor<\/a>.<\/p>\n

Was ist neu: Mermaid-Use-Case-Diagramme<\/h2>\n

VPasCode unterst\u00fctzte bereits Use-Case-Diagramme, die in PlantUML geschrieben wurden. Mit diesem Update k\u00f6nnen Sie sie auch in Mermaids usecase-beta<\/code> Syntax schreiben, die in Mermaid 12.0.0 und sp\u00e4ter verf\u00fcgbar ist. Die Syntax stellt Akteure, Use Cases, Systemgrenzen und die Beziehungen zwischen Akteuren und Use Cases dar.<\/p>\n

Diese Erg\u00e4nzung erleichtert es, Use-Case-Modelle im selben textbasierten Workflow wie Ihre anderen Mermaid-Diagramme zu pflegen. Bearbeiten Sie die Quelle, rendern Sie eine Vorschau und \u00fcberarbeiten Sie das Diagramm, wenn sich Ihre Anforderungen \u00e4ndern.<\/p>\n

\"Handgezeichnete<\/p>\n

Beispiel: Use-Case-Diagramm f\u00fcr ein Geldautomatensystem<\/h2>\n

Das unten gezeigte Beispiel zeigt zwei Akteure und die Geldautomatenfunktionen, auf die sie zugreifen k\u00f6nnen. Die Systemgrenze gruppiert die Use Cases, die zum Geldautomatensystem geh\u00f6ren.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
usecase-beta\r\ndirection LR\r\nactor User(\"Benutzer\")\r\nactor Technician(\"Techniker\")\r\nsystemBoundary \"Geldautomatensystem\"\r\n  Withdraw(\"Bargeld abheben\")\r\n  Transfer(\"Geld \u00fcberweisen\")\r\n  Deposit(\"Bargeld einzahlen\")\r\n  SettleBills(\"Rechnungen begleichen\")\r\n  Repair(\"Geldautomat reparieren\")\r\nend\r\nUser --> Withdraw\r\nUser --> Transfer\r\nUser --> Deposit\r\nUser --> SettleBills\r\nTechnician --> Repair<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Hier actor<\/code> definiert die Personen, die mit dem System interagieren, und jeder benannte Use Case stellt eine Funktion dar. Das systemBoundary<\/code> gruppiert diese Funktionen unter dem Geldautomatensystem. Die Pfeile zeigen, auf welche Funktionen jeder Akteur zugreifen kann, w\u00e4hrend direction LR<\/code> ein links-nach-rechts-Layout anfordert.<\/p>\n
Warum Mermaid f\u00fcr Use-Case-Diagramme verwenden?<\/h2>\n
Ein textbasiertes Diagramm kann praktisch sein, wenn Sie ein Modell ben\u00f6tigen, das neben Anforderungen, Dokumentation oder Code leicht \u00fcberarbeitet werden kann. Anstatt Formen manuell neu anzuordnen, k\u00f6nnen Sie ein Label \u00e4ndern, einen Akteur hinzuf\u00fcgen oder eine Beziehung in der Quelle aktualisieren. Das macht Mermaid sowohl f\u00fcr fr\u00fche Designbesprechungen als auch daf\u00fcr n\u00fctzlich, Diagramme aktuell zu halten, w\u00e4hrend sich ein System weiterentwickelt.<\/p>\n
Anwendungsfalldiagramme k\u00f6nnen Produktmanagern, Business Analysten, Entwicklern, Architekten und Stakeholdern dabei helfen, ein gemeinsames Bild des Systemumfangs zu erstellen. Sie erleichtern die Diskussion von Fragen wie:<\/p>\n