Pele

https://pele.run/
Admin
Pele is a fast, lightweight library with zero dependencies that renders Mermaid diagrams to SVG and...
Tokens:60,419
Snippets:641
Trust Score:2.9
Update:3 days ago
Show doc for...
Tokens:
Raw
### Install Pele with bun

Source: https://pele.run/

Install Pele using bun package manager.

```bash
bun add pele
```

--------------------------------

### Customer and Order diagram with configuration

Source: https://pele.run/examples/class.md

Same as the previous example but with specific Mermaid configuration for theme and layout.

```mermaid
---
config:
  theme: default
  look: classic
  layout: dagre
---
classDiagram
  class Customer {
    +String name
    +String email
  }
  class Order {
    +String id
    +Date placedAt
    +total() Money
  }
  class LineItem {
    +int quantity
  }
  class Payment {
    <<interface>>
    +authorize() bool
  }
  Customer "1" --> "*" Order : places
  Order "1" *-- "*" LineItem : contains
  Order --> Payment : settled by
```

--------------------------------

### Install Pele with yarn

Source: https://pele.run/

Install Pele using yarn package manager.

```bash
yarn add pele
```

--------------------------------

### Install Pele with pnpm

Source: https://pele.run/

Install Pele using pnpm package manager.

```bash
pnpm add pele
```

--------------------------------

### Install Pele with npm

Source: https://pele.run/

Install Pele using npm package manager.

```bash
npm install pele
```

--------------------------------

### Coordinate Examples

Source: https://pele.run/examples/wardley.md

Demonstrates placing components at specific coordinates representing visibility and evolution.

```mermaid
wardley-beta
title Coordinate Examples

component Infrastructure [0.30, 0.20]        %% Low visibility, low evolution
component Product [0.70, 0.60]               %% High visibility, mid evolution
component User Need [0.90, 0.95]             %% High visibility, high evolution
```

--------------------------------

### Documentation example: Multiple sources to processor

Source: https://pele.run/examples/architecture.md

Mermaid architecture-beta diagram with three source servers feeding into a processor. Uses align row to arrange sources horizontally.

```mermaid
architecture-beta
    service src1(server)[Source 1]
    service src2(server)[Source 2]
    service src3(server)[Source 3]
    service proc(server)[Processor]
    src1:B --> T:proc
    src2:B --> T:proc
    src3:B --> T:proc
    align row src1 src2 src3
```

--------------------------------

### C4 Context Diagram Example

Source: https://pele.run/examples/c4.md

A comprehensive example of a system context diagram including enterprise boundaries, systems, databases, and queues with defined relationships and custom styling.

```mermaid
    C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="gray", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```

--------------------------------

### Create a complex mindmap with icons

Source: https://pele.run/examples/mindmap.md

A comprehensive example demonstrating nested branches, icons, and multi-line text.

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularization
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

--------------------------------

### Basic Requirement Diagram

Source: https://pele.run/examples/requirement.md

A simple example showing a requirement and an element satisfying it.

```mermaid
    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
```

--------------------------------

### Documentation example: Multiple databases to MCP

Source: https://pele.run/examples/architecture.md

Mermaid architecture-beta diagram with three databases in an API group connected to an MCP server. Uses align column to arrange the databases vertically.

```mermaid
architecture-beta
    group api(cloud)[API]
    service db1(database)[DB1] in api
    service db2(database)[DB2] in api
    service db3(database)[DB3] in api
    service mcp(server)[MCP] in api
    db1:R --> L:mcp
    db2:R --> L:mcp
    db3:R --> L:mcp
    align column db1 db2 db3
```

--------------------------------

### Simple sample state diagram (v1)

Source: https://pele.run/examples/state.md

A basic state diagram example using the v1 stateDiagram syntax.

```mermaid
stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

--------------------------------

### Documentation example: API group with database and storage

Source: https://pele.run/examples/architecture.md

Mermaid architecture-beta diagram showing an API group containing a database, two storage disks, and a server. Connections are made between the database and server, and between storage disks and the server/database.

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

--------------------------------

### Basic class inheritance

Source: https://pele.run/examples/class.md

Simple inheritance example between Animal and Vehicle/Car.

```mermaid
classDiagram
    class Animal
    Vehicle <|-- Car
```

--------------------------------

### Bank account example

Source: https://pele.run/examples/class.md

Simple class definition for a BankAccount with members and methods.

```mermaid
---
title: Bank example
---
classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)
```

--------------------------------

### Documentation example: Junctions and gateways

Source: https://pele.run/examples/architecture.md

Mermaid architecture-beta diagram using junctions to connect disks and gateways. Demonstrates junction usage with multiple connections to a central junction and a right junction.

```mermaid
architecture-beta
    service left_disk(disk)[Disk]
    service top_disk(disk)[Disk]
    service bottom_disk(disk)[Disk]
    service top_gateway(internet)[Gateway]
    service bottom_gateway(internet)[Gateway]
    junction junctionCenter
    junction junctionRight

    left_disk:R -- L:junctionCenter
    top_disk:B -- T:junctionCenter
    bottom_disk:T -- B:junctionCenter
    junctionCenter:R -- L:junctionRight
    top_gateway:B -- T:junctionRight
    bottom_gateway:T -- B:junctionRight
```

--------------------------------

### Basic node example

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart with a single node labeled 'id'.

```mermaid
---
title: Node
---
flowchart LR
    id
```

--------------------------------

### Simple sample state diagram

Source: https://pele.run/examples/state.md

A basic state diagram example showing transitions between Still, Moving, and Crash states.

```mermaid
---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

--------------------------------

### Event modeling with simple read model

Source: https://pele.run/examples/eventmodeling.md

A basic example of a read model definition.

```mermaid
eventmodeling

tf 03 evt ItemAdded
tf 02 rmo CartItems
tf 04 ui CartUI
```

--------------------------------

### Start and end transitions

Source: https://pele.run/examples/state.md

Defines transitions from and to the start/end state.

```mermaid
stateDiagram-v2
    [*] --> s1
    s1 --> [*]
```

--------------------------------

### Mermaid flowchart example

Source: https://pele.run/

Example Mermaid syntax that renders a flowchart. It shows a decision node where 'Yes' leads to Pele and 'No' leads to Mermaid, both converging to an SVG output.

```mermaid
flowchart TD
  A[Mermaid text] --> B{Flowchart?}
  B -- Yes --> C[Pele]
  B -- No --> D[Mermaid]
  C --> E([SVG])
  D --> E
```

--------------------------------

### Tea Shop Value Chain Documentation Example

Source: https://pele.run/examples/wardley.md

A variation of the tea shop value chain map with a slightly different note text.

```mermaid
wardley-beta
title Tea Shop Value Chain

anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Kettle [0.43, 0.35]
component Power [0.10, 0.70]

Business -> Cup of Tea
Cup of Tea -> Tea
Cup of Tea -> Hot Water
Hot Water -> Kettle
Kettle -> Power

evolve Kettle 0.62
evolve Power 0.89

note "Standardizing power allows Kettles to evolve faster" [0.30, 0.49]
```

--------------------------------

### Quadrant chart with labels

Source: https://pele.run/examples/quadrant.md

A basic quadrant chart example showing campaign reach and engagement data.

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

--------------------------------

### Treemap with valueFormat as percentage

Source: https://pele.run/examples/treemap.md

Formats the displayed values as percentages using the valueFormat '$.1%'. The example uses market share fractions.

```mermaid
---
config:
  treemap:
    valueFormat: '$.1%'
---
treemap-beta
"Market Share"
    "Company A": 0.35
    "Company B": 0.25
    "Company C": 0.15
    "Others": 0.25
```

--------------------------------

### Sequence diagram with four participants for narrow screens

Source: https://pele.run/examples/sequence.md

Example for narrow screens with four participants (Customer, Web app, API gateway, Bank). Shows message wrapping and notes while lifelines stay in columns. Uses autonumber and activation.

```mermaid
sequenceDiagram
  autonumber
  actor Customer
  participant Web as Web app
  participant API as API gateway
  participant Bank
  Customer->>Web: Place order
  Web->>API: POST /orders
  activate API
  API->>Bank: Authorise payment
  Bank-->>API: Approved
  API-->>Web: 201 Created
  deactivate API
  Web-->>Customer: Order confirmed
  Note over Customer,Bank: One order, one transaction
```

--------------------------------

### Basic Git graph with title

Source: https://pele.run/examples/git.md

A Mermaid gitGraph diagram with a title 'Example Git diagram' showing a simple workflow: two commits, a develop branch, two commits on develop, a merge back to main, and two final commits.

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

```

--------------------------------

### Beta XY Chart with Multiple Lines

Source: https://pele.run/examples/xychart.md

An example using the xychart-beta syntax to plot multiple line series.

```mermaid
xychart-beta
  title "An Example Chart"
  x-axis ["90d", "60d", "30d", "7d", "1d", "Current"]
  y-axis "Seconds" 0 --> 198.2
  line "avg" [48.1, 41.5, 45.7, 72.8, 67.7, 59.9]
  line "p50" [38.2, 36.8, 39.7, 54.5, 49.0, 38.4]
  line "p95" [112.2, 75.3, 103.0, 177.0, 180.2, 109.4]
```

--------------------------------

### Basic Pie Chart with Title

Source: https://pele.run/examples/pie.md

Creates a simple pie chart titled 'Pets adopted by volunteers' with three data slices: Dogs, Cats, and Rats. Use this as a starting point for basic pie chart visualization.

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

--------------------------------

### Documentation example: AWS icons in architecture diagram

Source: https://pele.run/examples/architecture.md

Mermaid architecture-beta diagram using AWS logos for services: aws-lambda for the API group, aws-aurora for database, aws-glacier and aws-s3 for storage, and aws-ec2 for server. Shows connections between these services.

```mermaid
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

--------------------------------

### Treemap with valueFormat as currency

Source: https://pele.run/examples/treemap.md

Formats the displayed values as currency using the valueFormat '$0,0'. The example uses a budget with large numbers.

```mermaid
---
config:
  treemap:
    valueFormat: '$0,0'
---
treemap-beta
"Budget"
    "Operations"
        "Salaries": 700000
        "Equipment": 200000
        "Supplies": 100000
    "Marketing"
        "Advertising": 400000
        "Events": 100000
```

--------------------------------

### Define entities with detailed attributes

Source: https://pele.run/examples/er.md

An expanded example including dates and specific attribute types for customers, orders, line items, and products.

```mermaid
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : "appears in"
  CUSTOMER {
    string name
    string email
  }
  ORDER {
    int id
    date placedAt
  }
  LINE_ITEM {
    int quantity
    float price
  }
  PRODUCT {
    string sku
    string title
  }
```

--------------------------------

### Use case diagram with system boundary styling

Source: https://pele.run/examples/usecase.md

Demonstrates styling a system boundary as a package and applying class definitions.

```mermaid
usecase-beta
systemBoundary sb1["Payment service"]@{ type: package }:::system
  actor Clerk("Payment clerk")
  Authorize("Authorize payment")
  Receipt[Create receipt]
end
Clerk --> Authorize
Authorize --> Receipt
classDef system stroke:#4b4b7a
```

--------------------------------

### Define entities with PK, FK, and constraints

Source: https://pele.run/examples/er.md

Shows how to define primary keys (PK), foreign keys (FK), unique keys (UK), and attribute constraints.

```mermaid
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber PK
        string make
        string model
        string[] parts
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK "The license #"
        string(99) firstName "Only 99 characters are allowed"
        string lastName
        string phone UK
        int age
    }
    NAMED-DRIVER {
        string carRegistrationNumber PK, FK
        string driverLicense PK, FK
    }
    MANUFACTURER only one to zero or more CAR : makes
```

--------------------------------

### Use case diagram with inheritance and include/extend

Source: https://pele.run/examples/usecase.md

Demonstrates inheritance, include, and extend relationships.

```mermaid
usecase-beta
actor Admin
actor Person
Checkout
Payment
ApplyCoupon
Admin --|> Person
Checkout ..> : include Payment
ApplyCoupon ..> : extend Checkout
ApplyCoupon --|> Checkout
```

--------------------------------

### Define simple subgraph

Source: https://pele.run/examples/er.md

A basic example of grouping an entity into a subgraph.

```mermaid
erDiagram
    subgraph title1
        CUSTOMER
    end
```

--------------------------------

### Use case diagram with external package reference

Source: https://pele.run/examples/usecase.md

Shows how to define a system boundary and reference it as a package externally.

```mermaid
usecase-beta
systemBoundary "Payment service"
  actor Clerk("Payment clerk")
  Authorize("Authorize payment")
end
Payment_service@{ type: package }
Clerk --> Authorize
```

--------------------------------

### Kanban Diagram with Configuration

Source: https://pele.run/examples/kanban.md

Configures a ticket base URL and displays a multi-column board with various tasks and metadata.

```mermaid
---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]
```

--------------------------------

### Disabling zoom

Source: https://pele.run/api.md

Example of how to disable zoom functionality when mounting a diagram.

```ts
mount(container, source, { zoom: false });
```

--------------------------------

### Requirement Diagram with configuration

Source: https://pele.run/examples/requirement.md

Demonstrates applying a specific theme and layout configuration to the diagram.

```mermaid
---
config:
  theme: default
  look: classic
  layout: dagre
---
requirementDiagram
  requirement checkout_req {
    id: 1
    text: Orders must be payable online.
    risk: high
    verifymethod: test
  }
  functionalRequirement payment_req {
    id: 1.1
    text: Card payments must be authorized.
    risk: high
    verifymethod: test
  }
  element checkout_service {
    type: service
  }
  checkout_req - contains -> payment_req
  checkout_service - satisfies -> payment_req
```

--------------------------------

### Node with text example

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart with a node containing text in a box.

```mermaid
---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]
```

--------------------------------

### Use case diagram with literal markers and formatting

Source: https://pele.run/examples/usecase.md

Demonstrates using literal markers and formatted labels in use case diagrams.

```mermaid
usecase-beta
actor Analyst(*Analyst*)
Literal(**Literal markers**)
Priced[Costs 19.95 EUR — VAT included!]
Analyst -- files R&D report --> Literal
Analyst --> Priced
```

--------------------------------

### Tree structure

Source: https://pele.run/examples/flowchart.md

Displays a hierarchical tree structure starting from a single node.

```mermaid
flowchart TD
  A[Start] --> B[Parse]
  A --> C[Measure]
  B --> D[Layout]
  C --> D
  D --> E[Draw]
  D --> F[Export]
  D --> G[Cache]
```

--------------------------------

### Use case diagram with styling and animation

Source: https://pele.run/examples/usecase.md

Shows how to apply styles, classes, and animations to elements.

```mermaid
usecase-beta
actor Customer
Checkout
Payment
Customer opens@-- "starts checkout" ---> Checkout
Checkout payment@..> : include Payment
classDef emphasized stroke:#d33,stroke-width:3px
class opens,payment emphasized
style opens stroke:#06c,stroke-width:4px
opens@{ animation: fast }
payment@{ animate: false }
```

--------------------------------

### Use case diagram with notes

Source: https://pele.run/examples/usecase.md

Demonstrates adding notes to actors and use cases.

```mermaid
usecase-beta
note for Login "`Requires an **active session**`"
note for User "Starts the workflow"
actor User
Login("Sign in")
User --> Login
```

--------------------------------

### Block diagram flowchart example

Source: https://pele.run/examples/block.md

A block diagram representing a decision flowchart with custom styles.

```mermaid
block
  columns 3
  Start(("Start")) space:2
  down<[" "]>(down) space:2
  Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
  downAgain<["No"]>(down) space r3<["Done"]>(down)
  Process2["Process B"] r2<["Done"]>(right) End(("End"))

  style Start fill:#969;
  style End fill:#696;
```

--------------------------------

### Block diagram with invalid style syntax

Source: https://pele.run/examples/block.md

A block diagram example with a potentially incorrect style syntax.

```mermaid
  block
    A
    style A fill#969;
```

--------------------------------

### Use case diagram with configuration

Source: https://pele.run/examples/usecase.md

A use case diagram using specific configuration settings for theme, look, and layout.

```mermaid
---
config:
  theme: default
  look: classic
  layout: dagre
---
usecase-beta
direction LR
actor Customer
actor Support
systemBoundary Storefront
  Browse("Browse catalog")
  Checkout("Checkout")
end
systemBoundary Fulfilment
  Track("Track delivery")
end
Customer --> Browse
Customer --> Checkout
Customer --> Track
Support --> Track
Checkout ..> : include Browse
```

--------------------------------

### State Diagram with Inline Class Styling

Source: https://pele.run/examples/state.md

Demonstrates applying styling classes directly to states within the transition definitions using the ::: syntax.

```mermaid
stateDiagram
   direction TB

   accTitle: This is the accessible title
   accDescr: This is an accessible description

   classDef notMoving fill:white
   classDef movement font-style:italic;
   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

   [*] --> Still:::notMoving
   Still --> [*]
   Still --> Moving:::movement
   Moving --> Still
   Moving --> Crash:::movement
   Crash:::badBadEvent --> [*]
```

--------------------------------

### C4 Deployment Diagram for Live System

Source: https://pele.run/examples/c4.md

A deployment diagram illustrating the infrastructure nodes and container distribution for the Internet Banking System.

```mermaid
    C4Deployment
    title Deployment Diagram for Internet Banking System - Live

    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
    }

    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
        }
    }

    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
            }
        }
        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
            }
        }
        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
            }
        }
        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
            }
        }
    }

    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
    Rel(spa, api, "Makes API calls to", "json/HTTPS")
    Rel_U(web, spa, "Delivers to the customer's web browser")
    Rel(api, db, "Reads from and writes to", "JDBC")
    Rel(api, db2, "Reads from and writes to", "JDBC")
    Rel_R(db, db2, "Replicates data to")

    UpdateRelStyle(spa, api, $offsetY="-40")
    UpdateRelStyle(web, spa, $offsetY="-40")
    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
    UpdateRelStyle(db, db2, $offsetY="-10")
```

--------------------------------

### Define basic order entity relationship

Source: https://pele.run/examples/er.md

A simple example showing relationships between customers, orders, and delivery addresses.

```mermaid
mermaid
---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

--------------------------------

### Kanban Task with Metadata

Source: https://pele.run/examples/kanban.md

Demonstrates adding ticket information, assignee, and priority to a task.

```mermaid
kanban
todo[Todo]
  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
```

--------------------------------

### Mindmap with Unicode and Markdown

Source: https://pele.run/examples.md

A mindmap example showing the use of Unicode characters and markdown formatting within node labels.

```mermaid
mindmap
    id1["`**Pele** is the
goddess of volcanoes
Unicode works too: 🌋`"]
      id2["`She lives in **the** crater of Kīlauea... a *very old story* that is still told today`"]
      id3[Lava builds new land]
```

--------------------------------

### Event modeling with reset frames and processors

Source: https://pele.run/examples/eventmodeling.md

Demonstrates the use of reset frames (rf) and processors (pcr) in a workflow.

```mermaid
eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded

rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
```

--------------------------------

### Use case diagram with actor types and icons

Source: https://pele.run/examples/usecase.md

Demonstrates styling actors with types and icons.

```mermaid
usecase-beta
actor Normal("Normal actor")
actor Hollow("Hollow actor")@{ type: hollow }
actor Awesome("Awesome actor")@{ type: awesome }
actor Icon("Registered icon")@{ icon: "fa:user" }
actor Fallback("Missing icon fallback")@{ icon: "not-registered:user" }
Normal --> Manage
Hollow --> Manage
Awesome --> Manage
Icon --> Manage
Fallback --> Manage
```

--------------------------------

### Combine Links and Callbacks

Source: https://pele.run/examples/class.md

Demonstrates mixing callback and link interactions on different classes.

```mermaid
classDiagram
    class Class01
    class Class02
    callback Class01 "callbackFunction" "Callback tooltip"
    link Class02 "https://www.github.com" "This is a link"
    class Class03
    class Class04
    click Class03 call callbackFunction() "Callback tooltip"
    click Class04 href "https://www.github.com" "This is a link"
```

--------------------------------

### mount()

Source: https://pele.run/api.md

Displays a diagram that adapts to its container. Synchronous function.

```APIDOC
## mount()

### Description
Displays a diagram that adapts to its container. Synchronous function.

### Method
mount

### Parameters
- **source** (string) - Required - Mermaid diagram source code.

### Return Value
- **svg** (string) - The generated SVG markup.

### Example
```ts
import { mount } from 'pele';

const { svg } = mount(source);
```
```

--------------------------------

### Flowchart with stepAfter curve

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart using the 'stepAfter' curve configuration. The flowchart shows a loop from a decision node back to the start.

```mermaid
---
config:
  flowchart:
    curve: stepAfter
---
flowchart TD
  A[Start] --> B[Parse]
  A --> C[Measure]
  A --> D[Theme]
  B --> E{Fits?}
  C --> E
  D --> E
  E -->|Yes| F[Draw]
  E -->|No| A
```

--------------------------------

### Render diagram at different widths

Source: https://pele.run/api.md

Demonstrates parsing a source once and rendering it at multiple widths using the resulting model.

```ts
const model = parse(source);
const wide = render(model);
const narrow = render(model, { maxWidth: 320 });
```

--------------------------------

### Event modeling with read model (rmo) references

Source: https://pele.run/examples/eventmodeling.md

Shows how to link events to read models using the rmo syntax.

```mermaid
eventmodeling

tf 01 evt ItemAdded
tf 02 ui OtherUI
rf 03 rmo CartItems ->> 01
```

--------------------------------

### Flowchart with stepBefore curve

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart using the 'stepBefore' curve configuration. The flowchart shows a loop from a decision node back to the start.

```mermaid
---
config:
  flowchart:
    curve: stepBefore
---
flowchart TD
  A[Start] --> B[Parse]
  A --> C[Measure]
  A --> D[Theme]
  B --> E{Fits?}
  C --> E
  D --> E
  E -->|Yes| F[Draw]
  E -->|No| A
```

--------------------------------

### Flowchart with step curve

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart using the 'step' curve configuration. The flowchart shows a loop from a decision node back to the start.

```mermaid
---
config:
  flowchart:
    curve: step
---
flowchart TD
  A[Start] --> B[Parse]
  A --> C[Measure]
  A --> D[Theme]
  B --> E{Fits?}
  C --> E
  D --> E
  E -->|Yes| F[Draw]
  E -->|No| A
```

--------------------------------

### Requirement Diagram with class application

Source: https://pele.run/examples/requirement.md

Applies classes to requirements and elements using the ::: syntax or class command.

```mermaid
requirementDiagram

requirement test_req:::important {
    id: 1
    text: "class styling example"
    risk: low
    verifymethod: test
}

element test_entity {
    type: simulation
}

classDef important font-weight:bold

class test_entity important
style test_entity fill:#f9f,stroke:#333
```

--------------------------------

### Flowchart with linear curve

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart using the 'linear' curve configuration. The flowchart shows a loop from a decision node back to the start.

```mermaid
---
config:
  flowchart:
    curve: linear
---
flowchart TD
  A[Start] --> B[Parse]
  A --> C[Measure]
  A --> D[Theme]
  B --> E{Fits?}
  C --> E
  D --> E
  E -->|Yes| F[Draw]
  E -->|No| A
```

--------------------------------

### Use case diagram with complex styling

Source: https://pele.run/examples/usecase.md

Demonstrates advanced styling for actors, use cases, and system boundaries.

```mermaid
usecase-beta
actor Customer:::external
Checkout("Checkout"):::critical
systemBoundary Account
  Profile[Edit profile]
end
json Session@{ "active": true }:::data
Customer --> Checkout
Checkout --> Profile
Profile --> Session
classDef default stroke:#7f8ea3
classDef external,critical stroke-width:3px
class Customer,Checkout external,critical
class Account,Session data
style Checkout stroke:#c33,stroke-width:4px
style Account stroke:#536878
```

--------------------------------

### Flowchart with basis curve

Source: https://pele.run/examples/flowchart.md

Mermaid flowchart using the 'basis' curve configuration. The flowchart shows a loop from a decision node back to the start.

```mermaid
---
config:
  flowchart:
    curve: basis
---
flowchart TD
  A[Start] --> B[Parse]
  A --> C[Measure]
  A --> D[Theme]
  B --> E{Fits?}
  C --> E
  D --> E
  E -->|Yes| F[Draw]
  E -->|No| A
```

--------------------------------

### Tea Shop Value Chain Map

Source: https://pele.run/examples/wardley.md

A complete example of a Wardley map representing a tea shop value chain with evolution markers and a note.

```mermaid
wardley-beta
title Tea Shop Value Chain

anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Kettle [0.43, 0.35]
component Power [0.10, 0.70]

Business -> Cup of Tea
Cup of Tea -> Tea
Cup of Tea -> Hot Water
Hot Water -> Kettle
Kettle -> Power

evolve Kettle 0.62
evolve Power 0.89

note "Standardising power allows Kettles to evolve faster" [0.30, 0.49]
```

--------------------------------

### Evolution

Source: https://pele.run/examples/wardley.md

Shows how to define evolution for components over time.

```mermaid
wardley-beta
title Evolution

component Database [0.40, 0.50]
component API [0.55, 0.60]

Database -> API

evolve Database 0.75
evolve API 0.80
```

--------------------------------

### Add icons to nodes

Source: https://pele.run/examples/mindmap.md

Demonstrates adding icons to specific nodes using the ::icon syntax.

```mermaid
mindmap
    Root
        A
        ::icon(fa fa-book)
        B(B)
        ::icon(mdi mdi-skull-outline)
```

--------------------------------

### Handle parsing errors with PeleError

Source: https://pele.run/api.md

Catch PeleError to handle specific parsing or rendering failures. The example demonstrates checking for syntax errors and logging position information.

```ts
try {
  render(source);
} catch (error) {
  if (error instanceof PeleError && error.code === 'syntax') {
    console.log(`Line ${error.line}, column ${error.column}`);
    console.log(error.snippet);
  }
}
```

--------------------------------

### Use case diagram with various relationship types

Source: https://pele.run/examples/usecase.md

Demonstrates different arrow types and relationship styles.

```mermaid
usecase-beta
actor User
actor Support
Start
Finish
User --> Start
Start <-- Support
Start -- Finish
User --o Start
Start o-- Support
User --x Finish
Finish x-- Support
```

--------------------------------

### mount(element, text, options?)

Source: https://pele.run/api.md

Renders a diagram into an element and adapts the layout when the container is resized. Reads fonts from CSS and uses the container width as maxWidth.

```APIDOC
## mount(element, text, options?)

### Description
Renders a diagram into an element and adapts the layout when the container is resized. Reads fonts from CSS and uses the container width as maxWidth.

### Signature
```ts
function mount(element: HTMLElement, text: string, options?: MountOptions): Mounted
```

### Parameters
- **element** (HTMLElement) - Required - The container element to render the diagram into.
- **text** (string) - Required - The diagram source text.
- **options** (MountOptions) - Optional - Configuration options extending RenderOptions.

### MountOptions
- **onRender** ((result: RenderResult) => void) - Optional - Called after each render. Use it to attach link handlers or other SVG interactions.
- **zoom** (boolean | 'auto' | ZoomOptions) - Optional - Defaults to 'auto': enables zoom when the diagram shrinks to fit. Use true to always enable zoom, false to disable it, or ZoomOptions to configure it.
- **onError** ((error: unknown) => void) - Optional - Called when the text can't be drawn, or an automatic redraw fails.
- **sanitize** ((svg: string) => Node) - Optional - Passes each SVG through your app's sanitizer before insertion. By default, the SVG is inserted as HTML.

### Returns
Returns a Mounted object with the following members:
- **result** - Current RenderResult, or undefined if nothing could be drawn yet.
- **source** - The text last given, whether or not it could be drawn.
- **error** - Why that text couldn't be drawn, or undefined.
- **zoom** - The diagram's Zoom, or undefined if the zoom option is false.
- **update(text, options?)** - Updates the source and optionally replaces the options. Hidden diagrams may wait until visible to redraw.
- **refresh()** - Re-renders if the container width or the fonts have changed since the last render.
- **destroy()** - Stops observing the container. Leaves the diagram in place.

### Example
```ts
import { mount } from 'pele';

const diagram = mount(container, source);
```

### Notes
- mount() and update() don't throw when the text can't be drawn. The container shows the error instead.
- Call refresh() after changing fonts or moving the container.
- Use a container whose width does not depend on the diagram, such as a block element.
```

--------------------------------

### Review process state diagram with configuration

Source: https://pele.run/examples/state.md

The same review process diagram with custom theme, look, and layout configuration.

```mermaid
---
config:
  theme: default
  look: classic
  layout: dagre
---
stateDiagram-v2
  [*] --> Draft
  Draft --> Submitted : submit
  state Review {
    [*] --> Screening
    Screening --> Decision
  }
  Submitted --> Review
  Review --> Published : approved
  Review --> Draft : rejected
  Published --> [*]
```

--------------------------------

### Event modeling with external inventory processor

Source: https://pele.run/examples/eventmodeling.md

Shows a processor reacting to external inventory changes.

```mermaid
eventmodeling

tf 03 evt External.InventoryChanged
tf 02 pcr InventoryProcessor
tf 04 cmd ChangeInventory
tf 05 evt Cart.InventoryChanged
```

--------------------------------

### Use case diagram with multiple boundaries

Source: https://pele.run/examples/usecase.md

Demonstrates multiple system boundaries and relationships between actors and use cases.

```mermaid
usecase-beta
direction LR
actor Customer
actor Support
systemBoundary Storefront
  Browse("Browse catalog")
  Checkout("Checkout")
end
systemBoundary Fulfilment
  Track("Track delivery")
end
Customer --> Browse
Customer --> Checkout
Customer --> Track
Support --> Track
Checkout ..> : include Browse
```

--------------------------------

### Use case diagram with custom theme

Source: https://pele.run/examples/usecase.md

A use case diagram using a specific theme configuration.

```mermaid
---
config:
  theme: redux-color
---
usecase-beta
direction LR
actor Customer
systemBoundary Catalog
  Browse("Browse catalog")
end
systemBoundary Payment
  Checkout("Checkout")
end
Customer --> Browse
Browse --> Checkout
Checkout ..> : include Browse
```

--------------------------------

### Interface realization

Source: https://pele.run/examples/class.md

Shows a class realizing an interface.

```mermaid
classDiagram
  bar ()-- foo
```

--------------------------------

### Sequence diagram with config frontmatter (theme default, look classic)

Source: https://pele.run/examples/sequence.md

Sequence diagram with YAML frontmatter configuring theme 'default' and look 'classic'. Shows the same four-participant flow with activation.

```mermaid
---
config:
  theme: default
  look: classic
---
sequenceDiagram
  autonumber
  actor Customer
  participant Web as Web app
  participant API as API gateway
  participant Bank
  Customer->>Web: Place order
  Web->>API: POST /orders
  activate API
  API->>Bank: Authorize payment
  Bank-->>API: Approved
  API-->>Web: 201 Created
  deactivate API
  Web-->>Customer: Order confirmed
  Note over Customer,Bank: One order, one transaction
```

--------------------------------

### Advanced Gantt with Critical Path and Milestones

Source: https://pele.run/examples/gantt.md

Demonstrates task states like done, active, and critical, as well as milestones.

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
```
Tokens:
Raw