Skip to content

Gurpartap/pi-mermaid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ§œβ€β™€οΈ pi-mermaid

pi coding agent npm version license

Pi extension that renders Mermaid diagrams as ASCII in the TUI. It uses Mermaid's parser for syntax validation and beautiful-mermaid to render the ASCII art.

Pi β†’ https://pi.dev/

Features

  • Renders Mermaid blocks as ASCII diagrams inside Pi's TUI
  • Width-aware rendering: auto-selects tighter padding presets and clips output for narrow terminals
  • Collapsible output with source shown only on expand (ctrl+o)
  • Token efficiently adds parser warnings/errors to LLM context
  • Handles large blocks with safety limits and caching

Demo

Install

pi install npm:pi-mermaid

Or, clone into your Pi extensions directory and enable it:

git clone https://github.com/Gurpartap/pi-mermaid ~/.pi/agent/extensions/pi-mermaid

After installing, enter /reload or restart Pi.

Usage

Use Mermaid fenced blocks in chat:

```mermaid
graph TD
  Start --> End
```

Or render the last assistant message:

/pi-mermaid

Examples

More examples: https://agents.craft.do/mermaid

Mermaid (ASCII)
 β”Œβ”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
 β”‚       β”‚     β”‚        β”‚     β”‚          β”‚
 β”‚ Start β”œβ”€β”€β”€β”€β–Ίβ”‚ Choice β”œβ”€Yesβ–Ίβ”‚ Do thing β”‚
 β”‚       β”‚     β”‚        β”‚     β”‚          β”‚
 β””β”€β”€β”€β”€β”€β”€β”€β”˜     β””β”€β”€β”€β”€β”¬β”€β”€β”€β”˜     β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                    β”‚
                    β”‚
                    β”‚
                   No
                    β”‚
                    β”‚         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                    β”‚         β”‚          β”‚
                    └────────►│   Skip   β”‚
                              β”‚          β”‚
                              β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

```mermaid
flowchart LR
  A[Start] --> B{Choice}
  B -->|Yes| C[Do thing]
  B -->|No| D[Skip]
```
Mermaid (ASCII)
 β”Œβ”€β”€β”€β”€β”€β”€β”           β”Œβ”€β”€β”€β”€β”€β”           β”Œβ”€β”€β”€β”€β”€β”
 β”‚ User β”‚           β”‚ Web β”‚           β”‚ API β”‚
 β””β”€β”€β”€β”¬β”€β”€β”˜           β””β”€β”€β”¬β”€β”€β”˜           β””β”€β”€β”¬β”€β”€β”˜
     β”‚                 β”‚                 β”‚
     β”‚   Submit form   β”‚                 β”‚
     │─────────────────▢                 β”‚
     β”‚                 β”‚                 β”‚
     β”‚                 β”‚  POST /submit   β”‚
     β”‚                 │─────────────────▢
     β”‚                 β”‚                 β”‚
     β”‚                 β”‚   201 Created   β”‚
     β”‚                 β—€β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”‚
     β”‚                 β”‚                 β”‚
     β”‚  Show success   β”‚                 β”‚
     β—€β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”‚                 β”‚
     β”‚                 β”‚                 β”‚
 β”Œβ”€β”€β”€β”΄β”€β”€β”           β”Œβ”€β”€β”΄β”€β”€β”           β”Œβ”€β”€β”΄β”€β”€β”
 β”‚ User β”‚           β”‚ Web β”‚           β”‚ API β”‚
 β””β”€β”€β”€β”€β”€β”€β”˜           β””β”€β”€β”€β”€β”€β”˜           β””β”€β”€β”€β”€β”€β”˜

```mermaid
sequenceDiagram
  participant U as User
  participant W as Web
  participant API as API
  U->>W: Submit form
  W->>API: POST /submit
  API-->>W: 201 Created
  W-->>U: Show success
```
Mermaid (ASCII)
 β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”      β”Œβ”€β”€β”€β”€β”€β”                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
 β”‚ Client β”‚      β”‚ API β”‚                  β”‚ Database β”‚
 β””β”€β”€β”€β”€β”¬β”€β”€β”€β”˜      β””β”€β”€β”¬β”€β”€β”˜                  β””β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”˜
      β”‚             β”‚                           β”‚
      β”‚  transfer   β”‚                           β”‚
      │─────────────▢                           β”‚
      β”‚             β”‚                           β”‚
      β”‚             β”‚  txn (debit/credit/log)   β”‚
      β”‚             │───────────────────────────▢
      β”‚             β”‚                           β”‚
  β”Œalt [ok]─────────────────────────────────────────┐
  β”‚   β”‚             β”‚                           β”‚   β”‚
  β”‚   β”‚             β”‚          commit           β”‚   β”‚
  β”‚   β”‚             │───────────────────────────▢   β”‚
  β”‚   β”‚             β”‚                           β”‚   β”‚
  β”‚   β”‚     200     β”‚                           β”‚   β”‚
  β”‚   β—€β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”‚                           β”‚   β”‚
  β”‚   β”‚             β”‚                           β”‚   β”‚
  β”œ[fail]β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”€
  β”‚   β”‚             β”‚                           β”‚   β”‚
  β”‚   β”‚             β”‚         rollback          β”‚   β”‚
  β”‚   β”‚             │───────────────────────────▢   β”‚
  β”‚   β”‚             β”‚                           β”‚   β”‚
  β”‚   β”‚     400     β”‚                           β”‚   β”‚
  β”‚   β—€β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”‚                           β”‚   β”‚
  β”‚   β”‚             β”‚                           β”‚   β”‚
  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
      β”‚             β”‚                           β”‚
 β”Œβ”€β”€β”€β”€β”΄β”€β”€β”€β”      β”Œβ”€β”€β”΄β”€β”€β”                  β”Œβ”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”
 β”‚ Client β”‚      β”‚ API β”‚                  β”‚ Database β”‚
 β””β”€β”€β”€β”€β”€β”€β”€β”€β”˜      β””β”€β”€β”€β”€β”€β”˜                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

```mermaid
sequenceDiagram
  participant Client
  participant API
  participant Database
  Client->>API: transfer
  API->>Database: txn (debit/credit/log)
  alt ok
    API->>Database: commit
    API-->>Client: 200
  else fail
    API->>Database: rollback
    API-->>Client: 400
  end
```
Mermaid (ASCII)
  β”Œβ”€β”€β”€β”€β”€β”            β”Œβ”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
  β”‚ App β”‚            β”‚ Cache β”‚  β”‚ Database β”‚
  β””β”€β”€β”¬β”€β”€β”˜            β””β”€β”€β”€β”¬β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”˜
     β”‚                   β”‚            β”‚
     β”‚     Get data      β”‚            β”‚
     │───────────────────▢            β”‚
     β”‚                   β”‚            β”‚
     β”‚    Cache miss     β”‚            β”‚
     β—€β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”‚            β”‚
     β”‚                   β”‚            β”‚
 β”Œopt [Cache miss]────────────────────────┐
 β”‚   β”‚                   β”‚            β”‚   β”‚
 β”‚   β”‚             Query β”‚            β”‚   β”‚
 β”‚   │────────────────────────────────▢   β”‚
 β”‚   β”‚                   β”‚            β”‚   β”‚
 β”‚   β”‚            Resultsβ”‚            β”‚   β”‚
 β”‚   β—€β•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ•Œβ”‚   β”‚
 β”‚   β”‚                   β”‚            β”‚   β”‚
 β”‚   β”‚  Store in cache   β”‚            β”‚   β”‚
 β”‚   │───────────────────▢            β”‚   β”‚
 β”‚   β”‚                   β”‚            β”‚   β”‚
 β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
     β”‚                   β”‚            β”‚
  β”Œβ”€β”€β”΄β”€β”€β”            β”Œβ”€β”€β”€β”΄β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”
  β”‚ App β”‚            β”‚ Cache β”‚  β”‚ Database β”‚
  β””β”€β”€β”€β”€β”€β”˜            β””β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

```mermaid
sequenceDiagram
  participant A as App
  participant C as Cache
  participant DB as Database
  A->>C: Get data
  C-->>A: Cache miss
  opt Cache miss
    A->>DB: Query
    DB-->>A: Results
    A->>C: Store in cache
  end
```
Mermaid (ASCII)
 β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
 β”‚ Animal        β”‚
 β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
 β”‚ +name: String β”‚
 β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
 β”‚ +eat: void    β”‚
 β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
         β–³
         └──────────────────────┐
          β”‚                     β”‚
 β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
 β”‚ Dog            β”‚    β”‚ Cat             β”‚
 β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€    β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
 β”‚ +breed: String β”‚    β”‚ +isIndoor: bool β”‚
 β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€    β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
 β”‚ +bark: void    β”‚    β”‚ +meow: void     β”‚
 β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

```mermaid
classDiagram
  class Animal {
    +String name
    +eat() void
  }
  class Dog {
    +String breed
    +bark() void
  }
  class Cat {
    +bool isIndoor
    +meow() void
  }
  Animal <|-- Dog
  Animal <|-- Cat
```

Credits

This extension depends on and is made possible by these projects:

Thank you to the maintainers and contributors of these projects.

License

MIT Β© 2026 Gurpartap Singh (https://x.com/Gurpartap)

About

πŸ§œβ€β™€οΈ Pi extension that renders Mermaid diagrams as ASCII in the TUI, with width-aware output and safe handling for larger diagrams.

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors