Giraflow

Live preview server for .giraflow.json models — edit your model file and see changes instantly in the browser.

Installation

npm install -g giraflow

Quick Start

giraflow my-model.giraflow.json

This starts a local server and opens your browser. Any changes you save to the file are reflected immediately via hot reload.

Options

| Option | Description | |--------|-------------| | -p, --port <port> | Port to run server on (default: 3000) | | --no-open | Don't open browser automatically | | -h, --help | Show help |

# Custom port
giraflow model.giraflow.json --port 8080

# Without auto-opening the browser
giraflow model.giraflow.json --no-open

Views

Switch between views using the navigation bar in the browser.

Timeline

Chronological flow of events, state views, commands, and actors with colored symbols and example data.

Slices

Each element as an expandable card with JSON examples and Given-When-Then scenarios.

Expanded:

Table

Consolidated tabular overview of all elements grouped by type.

See Also

giraflow-cli — Terminal-based views, schema validation, and interactive model creation wizard.

File Format

Models are JSON files following the Giraflow JSON Schema. A minimal example:

{
  "name": "My Model",
  "timeline": [
    { "type": "event", "name": "OrderPlaced", "tick": 10 },
    { "type": "state", "name": "OrdersSV", "tick": 20, "sourcedFrom": ["OrderPlaced"] },
    { "type": "actor", "name": "WarehouseWorker", "tick": 30, "readsView": "OrdersSV", "sendsCommand": "ShipOrder" },
    { "type": "command", "name": "ShipOrder", "tick": 40 }
  ]
}

See more in the examples directory.

Links

• GitHub
• Changelog
• JSON Schema
• Examples