Skip to content
StartseiteWebAppsDokuÜber uns
🌐 Auto English 简体中文 繁體中文 Español Français Русский العربية Português Deutsch 日本語 한국어 हिन्दी

Pintora

Pintora ist eine Text-zu-Diagramm-Bibliothek, die mehrere Diagrammtypen uber eine kompakte, gut lesbare DSL unterstutzt. Sie ist inspiriert von PlantUML und Mermaid, bietet aber eine eigene Syntax und eine wachsende Auswahl an Diagrammtypen.

In Moraya umschliessen Sie Ihre Pintora-Definition in einem eingehegten Codeblock mit dem Sprach-Tag pintora, und der Editor rendert das Diagramm automatisch.

Die vollstandige Syntaxreferenz finden Sie in der offiziellen Pintora-Dokumentation.

Unterstutzte Diagrammtypen

TypSchlusselwortAnwendungsfall
SequenzdiagrammsequenceDiagramInteraktionen zwischen Diensten/Komponenten uber die Zeit
AktivitatsdiagrammactivityDiagramWorkflows, Entscheidungsbaume, Prozessablaufe
KomponentendiagrammcomponentDiagramSystemarchitektur und Komponentenabhangigkeiten
ER-DiagrammerDiagramDatenbank-Entity-Relationship-Modelle
MindmapmindmapHierarchische Ideenorganisation
Gantt-DiagrammganttProjektzeitplane und Aufgabenplanung
DOT-DiagrammdotDiagramAllgemeines Graph-Rendering

Beispiele

Sequenzdiagramm — HTTP-Anfrage-Ablauf

Modelliert einen typischen REST-API-Aufruf vom Browser uber ein API-Gateway zu Backend-Diensten.

```pintora
sequenceDiagram
  participant Browser
  participant Gateway
  participant AuthService
  participant API
  participant DB

  Browser ->> Gateway: POST /api/orders
  Gateway ->> AuthService: Validate JWT token
  AuthService -->> Gateway: Token valid, user_id=42

  Gateway ->> API: Forward request (user_id=42)
  API ->> DB: INSERT INTO orders (...)
  DB -->> API: order_id=1001

  API -->> Gateway: 201 Created { id: 1001 }
  Gateway -->> Browser: 201 Created { id: 1001 }
```

Sequenzdiagramm mit Alt-Blocken

Ein Sequenzdiagramm mit bedingter Logik fur einen Authentifizierungsablauf.

```pintora
sequenceDiagram
  participant Client
  participant Server
  participant Database

  Client ->> Server: POST /login
  Server ->> Database: SELECT user by email
  Database -->> Server: user record

  alt password matches
    Server -->> Client: 200 OK (token)
  else password mismatch
    Server -->> Client: 401 Unauthorized
  end
```

Aktivitatsdiagramm — Benutzer-Anmeldeablauf

Ein vollstandiger Anmelde-Workflow mit Verzweigungen fur verschiedene Authentifizierungsergebnisse.

```pintora
activityDiagram
  start
  :User opens login page;
  :Enter email and password;
  :Submit form;

  if (Credentials valid?) then
    :Generate session token;
    if (2FA enabled?) then
      :Send OTP to phone;
      :User enters OTP;
      if (OTP correct?) then
        :Grant access;
      else
        :Show error message;
        :Log failed attempt;
        end
      endif
    else
      :Grant access;
    endif
    :Redirect to dashboard;
  else
    :Increment failure counter;
    if (Failures >= 5?) then
      :Lock account for 15 min;
      :Send alert email;
    else
      :Show error message;
    endif
  endif
  end
```

Komponentendiagramm

Veranschaulicht die Architektur einer Microservices-basierten E-Commerce-Plattform.

```pintora
componentDiagram
  package "Frontend" {
    [Web App]
    [Mobile App]
  }

  package "API Layer" {
    [API Gateway]
    [Auth Service]
  }

  package "Core Services" {
    [Order Service]
    [Product Service]
    [Payment Service]
    [Notification Service]
  }

  package "Data Stores" {
    [PostgreSQL]
    [Redis]
    [Elasticsearch]
    [S3]
  }

  [Web App] --> [API Gateway]
  [Mobile App] --> [API Gateway]
  [API Gateway] --> [Auth Service]
  [API Gateway] --> [Order Service]
  [API Gateway] --> [Product Service]

  [Order Service] --> [Payment Service]
  [Order Service] --> [Notification Service]
  [Order Service] --> [PostgreSQL]

  [Product Service] --> [PostgreSQL]
  [Product Service] --> [Elasticsearch]
  [Product Service] --> [S3]

  [Payment Service] --> [PostgreSQL]
  [Notification Service] --> [Redis]
  [Auth Service] --> [Redis]
```

ER-Diagramm

Modelliert das Datenbankschema fur eine Projektverwaltungsanwendung.

```pintora
erDiagram
  users {
    int id PK
    varchar username
    varchar email
    timestamp created_at
  }

  projects {
    int id PK
    varchar name
    text description
    int owner_id FK
    enum status
    timestamp deadline
  }

  tasks {
    int id PK
    int project_id FK
    int assignee_id FK
    varchar title
    text description
    enum priority
    enum status
    timestamp due_date
  }

  comments {
    int id PK
    int task_id FK
    int author_id FK
    text body
    timestamp created_at
  }

  labels {
    int id PK
    varchar name
    varchar color
  }

  users ||--o{ projects : "owns"
  users ||--o{ tasks : "assigned to"
  projects ||--o{ tasks : "contains"
  tasks ||--o{ comments : "has"
  users ||--o{ comments : "writes"
  tasks }o--o{ labels : "tagged with"
```

Mindmap

Eine Wissenshierarchie zum Erlernen von Webentwicklungs-Technologien.

```pintora
mindmap
  + Web Development
    + Frontend
      + HTML / CSS
      + JavaScript
      + React
      + Svelte
    + Backend
      + Node.js
      + Rust
      + Go
    + DevOps
      + Docker
      + CI/CD
    + Databases
      + PostgreSQL
      + Redis
```

Gantt-Diagramm

Ein Projektzeitplan fur die Entwicklung und den Launch eines Mobile-App-MVPs.

```pintora
gantt
  title Mobile App MVP Timeline
  dateFormat YYYY-MM-DD

  section Planning
  Requirements gathering : 2026-03-01, 7d
  Technical design       : 2026-03-08, 5d
  UI/UX wireframes       : 2026-03-08, 7d

  section Development
  Auth module            : 2026-03-15, 10d
  Core features          : 2026-03-15, 20d
  API integration        : 2026-03-25, 10d
  Push notifications     : 2026-04-01, 5d

  section Testing
  Unit tests             : 2026-03-25, 15d
  Integration testing    : 2026-04-05, 7d
  UAT                    : 2026-04-10, 5d
  Bug fixes              : 2026-04-10, 10d

  section Launch
  App store submission   : 2026-04-20, 3d
  Marketing prep         : 2026-04-15, 8d
  Public release         : 2026-04-23, 1d
```