Documentation & Syntax Guide

About .krs & .karsa File Formats

Karsa Studio introduces custom file formats to save and load your workspace state completely.

.karsa (Karsa Studio Project): This format saves your entire workspace, including all documents and editor state. Ideal for creating backups and continuing your session later.
.krs (Karsa Diagram Document): This is a lightweight format that saves a single diagram and its styling. Designed for sharing an individual diagram file cleanly.

Flowchart

Process flow with various node shapes (box, oval, cylinder) and custom styles.

flowchart TD
    A([Start]) --> B[Shopping Cart]
    B --> C{Logged in?}
    C -- No --> D[Login Page]
    D --> E[(User Database)]
    E --> C
    C -- Yes --> F[Select Address]
    F --> G[Select Payment]

    subgraph Payment
        direction LR
        G --> H{Method}
        H -->|Transfer| I[Virtual Account]
        H -->|E-Wallet| J[QRIS]
    end

    I & J --> L{Success?}
    L -- Yes --> M[/Send Invoice/]
    L -- No --> G
    M --> N([Finish])

flowchart TD A([Start]) --> B[Shopping Cart] B --> C{Logged in?} C -- No --> D[Login Page] D --> E[(User Database)] E --> C C -- Yes --> F[Select Address] F --> G[Select Payment] subgraph Payment direction LR G --> H{Method} H -->|Transfer| I[Virtual Account] H -->|E-Wallet| J[QRIS] end I & J --> L{Success?} L -- Yes --> M[/Send Invoice/] L -- No --> G M --> N([Finish])

Architecture Flowchart

Service architecture with clear layer boundaries.

flowchart LR
    Client((User)) --> CDN[CDN / WAF]
    CDN --> Gateway[API Gateway]

    subgraph Services [App Services]
        Gateway --> Auth{{Auth Service}}
        Gateway --> Order[Order Service]
    end

    subgraph Databases [Data Storage]
        Auth --> DBAuth[(User DB)]
        Order --> DBOrder[(Order DB)]
    end

    Order -.-> Queue>Message Queue]
    Queue -.-> Worker[[Worker Node]]

flowchart LR Client((User)) --> CDN[CDN / WAF] CDN --> Gateway[API Gateway] subgraph Services [App Services] Gateway --> Auth{{Auth Service}} Gateway --> Order[Order Service] end subgraph Databases [Data Storage] Auth --> DBAuth[(User DB)] Order --> DBOrder[(Order DB)] end Order -.-> Queue>Message Queue] Queue -.-> Worker[[Worker Node]]

Sequence Diagram

Interaction diagram and operation sequence between systems or actors.

sequenceDiagram
    autonumber
    actor U as User
    participant C as Client App
    participant S as Server
    participant DB as Database

    U->>C: Click Login
    activate C
    C->>S: POST /auth/login
    activate S
    S->>DB: Query user by email
    activate DB
    DB-->>S: Return user hash
    deactivate DB
    
    alt Password match
        S-->>C: 200 OK (Token)
        C-->>U: Show Dashboard
    else Password mismatch
        S-->>C: 401 Unauthorized
        C-->>U: Show Error
    end
    deactivate S
    deactivate C

sequenceDiagram autonumber actor U as User participant C as Client App participant S as Server participant DB as Database U->>C: Click Login activate C C->>S: POST /auth/login activate S S->>DB: Query user by email activate DB DB-->>S: Return user hash deactivate DB alt Password match S-->>C: 200 OK (Token) C-->>U: Show Dashboard else Password mismatch S-->>C: 401 Unauthorized C-->>U: Show Error end deactivate S deactivate C

State Diagram

Object status transition from one condition to another (State Machine).

stateDiagram-v2
    direction LR
    [*] --> Draft
    Draft --> Pending : submit
    Pending --> Paid : pay
    Pending --> Cancelled : timeout
    Paid --> Shipped : ship

    state Shipped {
        [*] --> InTransit
        InTransit --> Delivered
        Delivered --> [*]
    }

    Shipped --> Completed
    Completed --> [*]
    Cancelled --> [*]

stateDiagram-v2 direction LR [*] --> Draft Draft --> Pending : submit Pending --> Paid : pay Pending --> Cancelled : timeout Paid --> Shipped : ship state Shipped { [*] --> InTransit InTransit --> Delivered Delivered --> [*] } Shipped --> Completed Completed --> [*] Cancelled --> [*]

ER Diagram (Database)

Relational database schema complete with PK, FK, and cardinality.

erDiagram
    USERS ||--o{ ORDERS : "places"
    ORDERS ||--|{ ORDER_ITEMS : "contains"
    PRODUCTS ||--o{ ORDER_ITEMS : "ordered in"

    USERS {
        bigint id PK
        varchar email UK
        varchar full_name
    }
    ORDERS {
        bigint id PK
        bigint user_id FK
        varchar status
    }
    ORDER_ITEMS {
        bigint id PK
        bigint order_id FK
        bigint product_id FK
        int quantity
    }
    PRODUCTS {
        bigint id PK
        varchar name
        decimal price
    }

erDiagram USERS ||--o{ ORDERS : "places" ORDERS ||--|{ ORDER_ITEMS : "contains" PRODUCTS ||--o{ ORDER_ITEMS : "ordered in" USERS { bigint id PK varchar email UK varchar full_name } ORDERS { bigint id PK bigint user_id FK varchar status } ORDER_ITEMS { bigint id PK bigint order_id FK bigint product_id FK int quantity } PRODUCTS { bigint id PK varchar name decimal price }

Class Diagram (OOP)

Class structure, interface, abstraction, and their relationships.

classDiagram
    direction TB
    class Repository~T~ {
        <<interface>>
        +findById(id) T
        +save(entity T) void
    }
    class User {
        +String id
        +String email
        +login(password) bool
    }
    class Order {
        +String id
        +OrderStatus status
    }
    class OrderStatus {
        <<enumeration>>
        PENDING
        PAID
    }
    class UserRepository
    class OrderService {
        -Repository~Order~ repo
        +checkout(user) Order
    }

    Repository <|.. UserRepository : implements
    User "1" --> "*" Order : places
    Order --> OrderStatus
    OrderService ..> Repository : uses

classDiagram direction TB class Repository~T~ { <<interface>> +findById(id) T +save(entity T) void } class User { +String id +String email +login(password) bool } class Order { +String id +OrderStatus status } class OrderStatus { <<enumeration>> PENDING PAID } class UserRepository class OrderService { -Repository~Order~ repo +checkout(user) Order } Repository <|.. UserRepository : implements User "1" --> "*" Order : places Order --> OrderStatus OrderService ..> Repository : uses

Gantt Chart (Jadwal)

Project scheduling, task dependencies, and time allocation.

gantt
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section Planning
    Requirements   :done, req, 2024-01-01, 7d
    UI Design      :active, ui, after req, 5d
    
    section Development
    Backend API    :crit, active, api, after req, 10d
    Frontend Int   :front, after api, 7d
    
    section Testing
    QA Testing     :test, after front, 5d
    Deployment     :milestone, after test, 0d

gantt dateFormat YYYY-MM-DD axisFormat %m/%d section Planning Requirements :done, req, 2024-01-01, 7d UI Design :active, ui, after req, 5d section Development Backend API :crit, active, api, after req, 10d Frontend Int :front, after api, 7d section Testing QA Testing :test, after front, 5d Deployment :milestone, after test, 0d

Mindmap

Hierarchical mind mapping radially or centrally.

mindmap
  root((Company))
    Engineering
      Backend
      Frontend
      DevOps
        CI/CD
        Kubernetes
    Product
      Design
      Research
    Sales
      Inbound
      Outbound

mindmap root((Company)) Engineering Backend Frontend DevOps CI/CD Kubernetes Product Design Research Sales Inbound Outbound

Pie Chart

Metrics visualization / data proportion distribution.

pie title API Traffic Distribution
    "Mobile App" : 45
    "Web App" : 35
    "Public API" : 15
    "Internal" : 5

pie title API Traffic Distribution "Mobile App" : 45 "Web App" : 35 "Public API" : 15 "Internal" : 5

Git Graph

Visualization of branches and commit history in a Git repository.

gitGraph
    commit
    branch develop
    checkout develop
    commit id:"add auth"
    commit id:"add db"
    checkout main
    merge develop
    branch hotfix
    checkout hotfix
    commit id:"fix bug"
    checkout main
    merge hotfix

gitGraph commit branch develop checkout develop commit id:"add auth" commit id:"add db" checkout main merge develop branch hotfix checkout hotfix commit id:"fix bug" checkout main merge hotfix

Packet Diagram

Bit structure or data network packet.

packet-beta
title TCP Header
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106-111: "Flags"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"

packet-beta title TCP Header 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Data Offset" 100-105: "Reserved" 106-111: "Flags" 112-127: "Window" 128-143: "Checksum" 144-159: "Urgent Pointer"

C4 Context

System context diagram using the C4 model (Context, Containers, Components, Code).

C4Context
    title Internet Banking System Context

    Person(customer, "Customer", "Bank customer with personal accounts")
    
    System_Boundary(b0, "Bank System") {
        System(banking, "Internet Banking", "Allows customers to view balances & transfer funds")
    }

    System_Ext(mail, "Email System", "Internal email system")
    System_Ext(core, "Core Banking", "Stores account & transaction data")

    Rel(customer, banking, "Uses", "HTTPS")
    Rel(banking, mail, "Sends emails via", "SMTP")
    Rel(banking, core, "Fetches data via", "JSON/HTTPS")
    Rel(mail, customer, "Sends notifications to")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

C4Context title Internet Banking System Context Person(customer, "Customer", "Bank customer with personal accounts") System_Boundary(b0, "Bank System") { System(banking, "Internet Banking", "Allows customers to view balances & transfer funds") } System_Ext(mail, "Email System", "Internal email system") System_Ext(core, "Core Banking", "Stores account & transaction data") Rel(customer, banking, "Uses", "HTTPS") Rel(banking, mail, "Sends emails via", "SMTP") Rel(banking, core, "Fetches data via", "JSON/HTTPS") Rel(mail, customer, "Sends notifications to") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Block Diagram

Layout blok (Block Diagram) dengan kolom custom (Berguna untuk arsitektur bebas).

block-beta
    columns 3
    frontend["Frontend"]:3
    space down1<[" "]>(down) space
    api["API"] auth["Auth"] queue["Queue"]
    space down2<[" "]>(down) space
    db[("Database")]:3

    style frontend fill:#6366f1,color:#fff
    style db fill:#10b981,color:#fff

block-beta columns 3 frontend["Frontend"]:3 space down1<[" "]>(down) space api["API"] auth["Auth"] queue["Queue"] space down2<[" "]>(down) space db[("Database")]:3 style frontend fill:#6366f1,color:#fff style db fill:#10b981,color:#fff

Timeline

Jalur waktu suatu sejarah kejadian (Event Timeline).

timeline
    title Startup Journey
    section Early Stage
        2023 : Idea & Validation
             : Core team formed
        2024 : MVP Launched
             : First 1,000 users
    section Growth
        2025 : Seed funding
             : Expansion to 5 cities
        2026 : Series A
             : 1 million users

timeline title Startup Journey section Early Stage 2023 : Idea & Validation : Core team formed 2024 : MVP Launched : First 1,000 users section Growth 2025 : Seed funding : Expansion to 5 cities 2026 : Series A : 1 million users

User Journey

Pemetaan pengalaman pengguna berdasarkan alur tahapannya.

journey
    title Online Shopping Experience
    section Finding products
        Open app: 5: Customer
        Search product: 3: Customer
        Read reviews: 4: Customer
    section Checkout
        Add to cart: 5: Customer
        Fill address: 2: Customer
        Pay: 3: Customer, Payment
    section Delivery
        Track package: 4: Customer, Courier
        Receive item: 5: Customer

journey title Online Shopping Experience section Finding products Open app: 5: Customer Search product: 3: Customer Read reviews: 4: Customer section Checkout Add to cart: 5: Customer Fill address: 2: Customer Pay: 3: Customer, Payment section Delivery Track package: 4: Customer, Courier Receive item: 5: Customer

Kanban Board

Papan tugas manajemen ala Kanban untuk manajemen proyek.

kanban
    todo[Todo]
        t1[Design login page]
        t2[Setup CI/CD]@{ priority: 'High' }
    progress[In Progress]
        t3[Auth API]@{ assigned: 'Rivaldi', priority: 'Very High' }
    review[Review]
        t4[Order service unit tests]
    done[Done]
        t5[Setup repository]

kanban todo[Todo] t1[Design login page] t2[Setup CI/CD]@{ priority: 'High' } progress[In Progress] t3[Auth API]@{ assigned: 'Rivaldi', priority: 'Very High' } review[Review] t4[Order service unit tests] done[Done] t5[Setup repository]

XY Chart (Bar & Line)

Diagram chart konvensional dengan sumbu X & Y, dengan grafik batang dan garis.

xychart-beta
    title "Monthly Revenue 2026 (Thousands USD)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Revenue" 0 --> 500
    bar [120, 150, 180, 210, 230, 260, 300, 320, 350, 390, 420, 480]
    line [100, 140, 170, 200, 220, 250, 280, 310, 340, 370, 410, 460]

xychart-beta title "Monthly Revenue 2026 (Thousands USD)" x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] y-axis "Revenue" 0 --> 500 bar [120, 150, 180, 210, 230, 260, 300, 320, 350, 390, 420, 480] line [100, 140, 170, 200, 220, 250, 280, 310, 340, 370, 410, 460]

Quadrant Chart

Matriks kuadran 2x2 yang sangat berguna untuk prioritisasi.

quadrantChart
    title Feature Prioritization
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan
    quadrant-2 Do Now
    quadrant-3 Drop
    quadrant-4 Delegate
    Dark mode: [0.2, 0.55]
    Export PDF: [0.45, 0.8]
    SSO Login: [0.75, 0.9]
    Animations: [0.3, 0.2]
    Multi-language: [0.8, 0.35]

quadrantChart title Feature Prioritization x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Plan quadrant-2 Do Now quadrant-3 Drop quadrant-4 Delegate Dark mode: [0.2, 0.55] Export PDF: [0.45, 0.8] SSO Login: [0.75, 0.9] Animations: [0.3, 0.2] Multi-language: [0.8, 0.35]

Sankey Diagram

Visualisasi aliran bobot atau nilai (Flow rate) dari satu titik ke titik lain.

sankey-beta

Income,Salary,60
Income,Investments,25
Income,Freelance,15
Salary,Needs,35
Salary,Savings,15
Salary,Entertainment,10
Investments,Savings,25
Freelance,Needs,5
Freelance,Entertainment,10

sankey-beta Income,Salary,60 Income,Investments,25 Income,Freelance,15 Salary,Needs,35 Salary,Savings,15 Salary,Entertainment,10 Investments,Savings,25 Freelance,Needs,5 Freelance,Entertainment,10

Radar Chart

Perbandingan berbagai atribut metrik pada objek dalam sumbu melingkar.

radar-beta
    title Framework Comparison
    axis perf["Performance"], dx["DX"], eco["Ecosystem"], learn["Learning"], ssr["SSR"]
    curve react["React"]{80, 85, 95, 70, 85}
    curve vue["Vue"]{85, 90, 80, 90, 80}
    curve svelte["Svelte"]{95, 90, 60, 85, 80}
    max 100
    min 0

radar-beta title Framework Comparison axis perf["Performance"], dx["DX"], eco["Ecosystem"], learn["Learning"], ssr["SSR"] curve react["React"]{80, 85, 95, 70, 85} curve vue["Vue"]{85, 90, 80, 90, 80} curve svelte["Svelte"]{95, 90, 60, 85, 80} max 100 min 0

Treemap

Blok proporsional berhierarki untuk memvisualisasikan data bersarang (nested).

treemap-beta
"Budget"
    "Engineering"
        "Backend": 40
        "Frontend": 30
        "DevOps": 15
    "Marketing"
        "Ads": 25
        "Content": 10
    "Operations": 20

treemap-beta "Budget" "Engineering" "Backend": 40 "Frontend": 30 "DevOps": 15 "Marketing" "Ads": 25 "Content": 10 "Operations": 20

Complete Karsa Studio Documentation