### Install and Build Packages

Source: https://github.com/hikerpig/pintora/blob/master/AGENTS.md

Installs all project dependencies and compiles all packages within the monorepo.

```bash
pnpm install
pnpm compile        # build all packages
```

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

### Start the Demo Development Server

Source: https://github.com/hikerpig/pintora/blob/master/CONTRIBUTING.md

Run the demo development server. After it starts, navigate to the specified URL in your browser. The demo will auto-reload on changes.

```sh
pnpm run demo:dev
```

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

### Install Project Dependencies

Source: https://github.com/hikerpig/pintora/blob/master/CONTRIBUTING.md

Install all project dependencies using pnpm. This command also triggers postinstall scripts.

```sh
pnpm i
```

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

### Development and Documentation Servers

Source: https://github.com/hikerpig/pintora/blob/master/AGENTS.md

Starts the local demo site and the local documentation site for development and previewing.

```bash
pnpm demo:dev       # local demo site
pnpm website:dev    # local docs site
```

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

### Install Pintora CLI Globally

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Install the Pintora CLI globally using npm. This command makes the `pintora` executable available system-wide.

```sh
npm i -g @pintora/cli
```

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

### Start Local Development Server

Source: https://github.com/hikerpig/pintora/blob/master/website/README.md

Runs a local development server that reflects changes live. Opens the site in a browser window.

```bash
npm run start
```

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

### Start and End Keywords in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Use `start` and `end` keywords to explicitly define the beginning and end points of an activity diagram. This helps in visualizing the overall flow.

```pintora
activityDiagram
  start
  :No pain;
  :No gain;
  end
```

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

### Deno Rendering

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Example of rendering diagrams with Pintora in Deno using the `@pintora/target-wintercg` package.

```APIDOC
## POST /render (Conceptual)

### Description
Demonstrates rendering Pintora DSL code within a Deno environment, saving the output to a file.

### Method
POST (Conceptual - this is a function call, not a REST endpoint)

### Endpoint
N/A

### Parameters
#### Request Body
- **code** (string) - Required - The Pintora DSL code to render.

### Request Example
```ts
import { render } from 'jsr:@pintora/target-wintercg'
import { writeFileSync } from 'node:fs'

async function main() {
  const result = await render({
    code: `
mindmap
title: Mind Map levels
* UML Diagrams
** Behavior Diagrams
*** Sequence Diagram
*** State Diagram
  `,
  })

  writeFileSync('./result.svg', result.data)
}
main()
```

### Response
#### Success Response (200)
- **{ type: string, data: any }** - An object containing the rendered output. `type` indicates the MIME type, and `data` contains the diagram content.

#### Response Example
(The rendered SVG content will be written to './result.svg')
```

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

### Simple Class Diagram Example

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/class-diagram.mdx

Demonstrates a basic class diagram with interfaces, classes, and relationships like inheritance and composition.

```pintora
classDiagram
  title: Class Diagram Example
  class Fruit {
    <<interface>>
    float sweetness
    -float age

    float getAge()
  }

  class Apple {
    float softness
    {static} Apple fromString(str)
  }

  %% There are so many kind of fruits
  Fruit <|-- Apple
  Fruit <|-- Kiwi
  Fruit <|-- Banana

  Fruit "many" --* "1" Bag: packed into
```

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

### WinterCG Runtime Example: Render Mindmap

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Shows how to use the `render` function within a WinterCG runtime to generate a mindmap diagram. This example assumes the `@pintora/target-wintercg` package is imported.

```javascript
import { render } from '@pintora/target-wintercg'

render({
  code: `
mindmap
title: Mind Map levels
* UML Diagrams
** Behavior Diagrams
*** Sequence Diagram
*** State Diagram
  `
})
```

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

### Review JSON Structure

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Example JSON structure for review data, potentially including a recommended action.

```json
{
  "recommended_action": {
    "type": "repair",
    "reason": "text overlaps relationship edge labels",
    "target": "diagram_source"
  }
}
```

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

### Node.js Example: Build SVG and PNG

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Demonstrates how to use the `render` function in Node.js to generate both SVG and PNG images from Pintora DSL code. It writes the output to files named 'example.svg' and 'example.png'.

```typescript
import { render, PintoraConfig } from '@pintora/cli'
import * as fs from 'fs'

const buildSVG = async (code: string, config?: Partial<PintoraConfig>) => {
  const str = await render({
    code: code,
    pintoraConfig: config,
    mimeType: 'image/svg+xml',
    width: 1000,
    backgroundColor: '#fff',
  })
  fs.writeFileSync('example.svg', str)
}

const buildPNG = async (code: string, config?: Partial<PintoraConfig>) => {
  const buf = await render({
    code: code,
    pintoraConfig: config,
    mimeType: 'image/png',
    width: 800,
    backgroundColor: '#fdfdfd', // use some other background color
  })
  fs.writeFileSync('example.png', buf)
}

const code = `
activityDiagram
start
:render functionl called;
if (is mimeType image/svg+xml ?) then
  :renderer svg;
  :render with jsdom;
  :generate string;
else (no)
  :renderer canvas;
  :render with node-canvas;
  :generate image buffer by mimeType;
endif

:return result;

end
`

buildSVG(code)

buildPNG(code)
```

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

### Render Diagram to a Container

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Example of using `pintora.renderTo` to render a diagram. It demonstrates setting a custom theme configuration.

```js
const container = document.createElement('div')
document.body.appendChild(container)

pintora.renderTo(code, {
  container,
  config: {
    themeConfig: {
      theme: 'dark'
    }
  }
})
```

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

### Deno Example: Render and Write SVG

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Demonstrates rendering a mindmap diagram in a Deno environment and writing the resulting SVG data to a file named 'result.svg'. Requires Deno 2 and `--allow-write` permission.

```typescript
import { render } from 'jsr:@pintora/target-wintercg'
import { writeFileSync } from 'node:fs'

async function main() {
  const result = await render({
    code: `
mindmap
title: Mind Map levels
* UML Diagrams
** Behavior Diagrams
*** Sequence Diagram
*** State Diagram
  `,
  })

  writeFileSync('./result.svg', result.data)
}
main()
```

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

### Time Interval Examples

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/gantt-diagram.mdx

Illustrates how to set the time interval between axis labels using different units like days, weeks, and minutes.

```text
axisInterval 1d
axisInterval 2w
axisInterval 30m
```

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

### Gantt Diagram with Tasks

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/gantt-diagram.mdx

Shows how to add tasks to a Gantt chart, including tasks with start and end dates, start dates and durations, only durations, tasks with IDs, and tasks dependent on others.

```pintora
gantt
  %% group tasks with 'section' sentence
  section Normal tasks
  "With start and end" : 2022-3-15, 2022-3-16
  "With start and duration" : 2022-3-16, 2d
  "With only duration" : 1d

  section Ids and Relations
  "With id" : task-1, 2022-3-15, 2d
  "After another task" : after task-1, 3d
```

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

### Registering a New Diagram Type

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/technical-brief.md

Example of how to define a diagram and register it with Pintora's diagram registry.

```APIDOC
## Registering a New Diagram Type

### Description
This section demonstrates the process of creating a new diagram definition that conforms to the `IDiagram` interface and registering it with Pintora's `diagramRegistry`.

### Method
```typescript
pintora.diagramRegistry.registerDiagram(diagramDefinition)
```

### Parameters
#### Request Body
- **diagramDefinition** (IDiagram) - Required - An object implementing the `IDiagram` interface.

### Request Example
```typescript
import { IDiagram } from '@pintora/core'
import pintora from '@pintora/standalone'

const diagramDefinition: IDiagram = {
  pattern: /^\s*myDiagram/,
  parser: {
    parse: (text) => {
      // Implementation to parse your diagram text
      console.log('Parsing myDiagram:', text);
      return {}; // Return DiagramIR
    }
  },
  artist: {
    draw: (diagramIR) => {
      // Implementation to draw your diagram
      console.log('Drawing myDiagram:', diagramIR);
      return {}; // Return GraphicsIR
    }
  },
  clear: () => {
    console.log('Clearing myDiagram state');
  }
}

pintora.diagramRegistry.registerDiagram(diagramDefinition)
```
```

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

### Define Default Theme (Ayu Light)

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/theme.mdx

Example implementation of the ITheme interface for the default light theme, based on the Ayu Light palette. This demonstrates how to structure a theme object.

```typescript
// ayu light
export const AYU_LIGHT = {
  white: '#fff',
  normalDark: '#3b4044',
  neutralGray: '#f8f8f2',
  cyan: '#55b4d4',
  green: '#9c0',
  orange: '#fdb05e',
  pink: '#f07171',
  purple: '#af71d0',
  red: '#e45649',
  yellow: '#f5f1be'
}

export class ThemeDefault implements ITheme {
  schemeOppsiteTheme = 'dark'

  primaryColor = AYU_LIGHT.orange
  secondaryColor = AYU_LIGHT.yellow
  teritaryColor = AYU_LIGHT.purple

  primaryLineColor = AYU_LIGHT.normalDark
  secondaryLineColor = AYU_LIGHT.normalDark

  textColor = AYU_LIGHT.normalDark
  primaryTextColor = AYU_LIGHT.normalDark
  secondaryTextColor = AYU_LIGHT.normalDark
  teritaryTextColor = AYU_LIGHT.normalDark

  primaryBorderColor = AYU_LIGHT.normalDark
  secondaryBorderColor = AYU_LIGHT.neutralGray

  groupBackground = AYU_LIGHT.white
  background1 = AYU_LIGHT.neutralGray

  noteBackground = AYU_LIGHT.yellow
}
```

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

### Register Custom Theme (Duskfox)

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/theme.mdx

Register a new theme named 'duskfox' using the themeRegistry. This example shows how to define a custom theme object and apply it.

```typescript
interface IPintoraStandalone {
  themeRegistry: {
    registerTheme(name: string, variables: ITheme): void
  }
}
```

```javascript
/** @typedef {import('@pintora/standalone').ITheme} ITheme */

// from a neovim theme https://github.com/EdenEast/nightfox.nvim
// duskfox https://coolors.co/3370ff-143c9a-01d6b9-447dfd-edf4ff
const PALETTE = {
  normalDark: '#393552',
  pink: '#EB6F92',
  purple: '#C4A7E7',
  blue: '#569FBA',
  yellow: '#F6C177',
  green: '#A3BE8C',
  lightBlue: '#9CCFD8',
  pastelPink: '#EA9A97',
  lightPurple: '#E0DEF4',
  white: '#f9f9f9',
};

/** @type {ITheme} */
const themeDuskFox = {
  schemeOppsiteTheme: 'default',
  isDark: true,

  primaryColor: PALETTE.pink,
  secondaryColor: PALETTE.purple,
  teritaryColor: PALETTE.blue,

  primaryLineColor: PALETTE.lightPurple,
  secondaryLineColor: PALETTE.lightBlue,

  textColor: PALETTE.white,
  primaryTextColor: PALETTE.normalDark,
  secondaryTextColor: PALETTE.white,
  teritaryTextColor: PALETTE.lightPurple,

  primaryBorderColor: PALETTE.white,
  secondaryBorderColor: PALETTE.blue,

  canvasBackground: PALETTE.normalDark,
  background1: PALETTE.pastelPink,
  lightestBackground: PALETTE.white,
  groupBackground: PALETTE.normalDark,

  noteBackground: PALETTE.yellow,
  noteTextColor: PALETTE.normalDark,
};


pintora.default.themeRegistry.registerTheme('duskfox', themeDuskFox);

// use it somewhere after
pintora.default.setConfig({
  themeConfig: {
    theme: 'duskfox',
  },
});
```

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

### ER Diagram Example

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/diagram-event.md

This is an example of an ER diagram that can be used to demonstrate event handling. It is not directly executable in this context but serves as a visual representation.

```pintora
erDiagram
  PERSON ||--o{ DELIVERY : makes
```

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

### Multiroot Mind Map Example

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/mindmap.mdx

Create a mind map with multiple roots by defining multiple depth-1 nodes, each initiating a new tree.

```pintora
mindmap
* UML Diagram
** Sequence Diagram
** State Diagram
** Component Diagram
* Non-UML Diagram
** Entity Relationship Diagram
** Mind Map
```

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

### Run Tests and Watch Mode

Source: https://github.com/hikerpig/pintora/blob/master/AGENTS.md

Executes the Jest test suite and starts Turbo in watch mode for continuous development.

```bash
pnpm test           # Jest test suite
pnpm watch          # turbo watch mode
```

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

### Click Event Callback Example

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/diagram-event.md

An example of a click event listener that logs the details of the clicked entity from an ER diagram. The `dEvent.item` object contains information about the diagram, type, ID, and data of the clicked element.

```javascript
pintora.diagramEventManager.on('click', (dEvent) => {
  console.log('diagramEvent click', dEvent.item)
  // {
  //   diagram: 'er',
  //   type: 'entity',
  //   id: 'entity-DELIVERY',
  //   data: {
  //     name: 'DELIVERY',
  //     // .. other properties of the entity
  //   },
  // }
})
```

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

### Get Current Pintora Configuration

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/config.md

Retrieve the current global configuration settings using the `getConfig` method.

```ts
pintora.default.getConfig()
```

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

### Component Diagram with Custom Styles

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/custom-style.md

This example demonstrates applying custom styles to a component diagram. Styles are defined in the @style block and then bound to specific nodes using @bindClass.

```pintora
@pre
@style {
  .cls-c1 {
    textColor: red;
  }
  #node-C1 {
    backgroundColor: #c5ff64;
  }
  #node-C2 {
    backgroundColor: #ffe664;
  }
  .cls-c3 {
    textColor: #ffffff;
    backgroundColor: #64a1ff;
  }
}
@endpre

componentDiagram
  title: Component Style Example
  [C1]
  [C2]
  [Component 3] as C3

@bindClass node-C3 cls-c3

```

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

### Render Diagram from HTML Element

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Example of using `pintora.renderContentOf` to render a diagram defined within a `<pre>` tag. It specifies 'canvas' as the renderer via a `data-renderer` attribute.

```html
<pre className="pintora" data-renderer="canvas">
mindmap
* Root
** Second
</pre>

<script type="module">
  import pintora from 'https://cdn.skypack.dev/@pintora/standalone'
  document.querySelectorAll('.pintora').forEach((codeElement) => {
    pintora.renderContentOf(codeElement)
  })
</script>
```

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

### Pie Chart Diagram Syntax

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/write-a-custom-diagram.md

Defines the basic syntax for a pie chart diagram, including the starting keyword, title format, and item format.

```text
pie
  title Bag of Fruits
  "apple" 5
  "peach" 6
  "banana" 2
```

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

### Set Global Pintora Configuration

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/config.md

Use `setConfig` to set default renderers, fonts, and other global options. This example sets the default renderer to Canvas and specifies a font family.

```js
pintora.default.setConfig({
  core: {
    defalutRenderer: 'canvas',
    defaultFontFamily: 'Menlo',
  },
  sequence: {
    messageFontSize: 16,
  },
})
```

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

### Override Diagram Configuration with Directives

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/getting-started/basic-syntax.mdx

Utilize '@param' and '@config' directives to dynamically adjust diagram settings. This example sets the font size and applies a specific theme and edge type for an ER diagram.

```pintora
erDiagram
  @param fontSize 18
  @config({
    "themeConfig": {
      "theme": "larkLight"
    },
    "er": {
      "edgeType": "ortho"
    }
  })
  CUSTOMER {
    int id PK
    int address FK
  }
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

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

### Build Demo and Docs Site

Source: https://github.com/hikerpig/pintora/blob/master/CONTRIBUTING.md

Build the static assets for the demo application and the documentation website.

```sh
pnpm run build-site
```

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

### Pintora CLI Render Command Help

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/getting-started/usage.mdx

Show detailed help for the 'pintora render' command, including all available options for input, output, styling, and more.

```sh
pintora render
```

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

### Build Static Website Content

Source: https://github.com/hikerpig/pintora/blob/master/website/README.md

Generates static website files into the 'build' directory, ready for deployment to any static hosting service.

```bash
npm run build
```

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

### Review Case Artifacts with Manual Adapter

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Reviews case artifacts using a manual review adapter and outputs the review data.

```bash
pintora-harness review-case --artifacts artifacts/harness/dev --adapter manual-review-pack --out artifacts/harness/dev/review.json
```

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

### Pintora Render Command Help

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Show help for the `pintora render` command. This details the options for rendering DSL to an image.

```sh
pintora render --help
```

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

### Mind Map with OrgMode Levels

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/mindmap.mdx

Use '*' symbols to define node levels in a mind map, starting from level 1.

```pintora
mindmap
title: Mind Map levels
* UML Diagrams
** Behavior Diagrams
*** Sequence Diagram
*** State Diagram
```

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

### Pintora CLI Help

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Display the main help information for the Pintora CLI. This shows available commands and global options.

```sh
pintora --help
```

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

### Review Decision JSON Structure

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Example JSON structure for a review decision, indicating the status and next step in the pipeline.

```json
{
  "status": "completed",
  "review_status": "consumed",
  "source": {
    "summary": "summary.json",
    "review": "review.json"
  },
  "next_step": {
    "type": "repair",
    "reason": "text overlaps relationship edge labels",
    "target": "diagram_source"
  }
}
```

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

### Simple Gantt Diagram Demo

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/gantt-diagram.mdx

Demonstrates a basic Gantt chart with a title, date format, axis format, and axis interval. Includes sections for development, documentation, optimization, and release milestones.

```pintora
gantt
  title Gantt example

  dateFormat YYYY-MM-DDTHH
  axisFormat MM-DD
  axisInterval 1w

  section Develop Prototype
  "Write grammar"       : t-a, 2022-2-17, 2022-2-23
  "Write artist"        : t-b, 2022-2-23, 2022-3-15

  %% the day I started typing the docs
  markDate 2022-3-15T20

  section Documentation
  "Write docs"          : t-c, 2022-3-15, 5d

  section Optimize
  "Add axisInterval" : 2022-3-28, 2022-4-04

  section Release
  "Release" : milestone, 2022-4-06, 0d
```

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

### Declare a Component Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/getting-started/basic-syntax.mdx

Use the 'componentDiagram' declaration to specify the diagram type. This example shows a basic component diagram structure.

```pintora
componentDiagram
  [Pintora] --> [DiagramRegistry] : Get diagram by type
```

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

### Class Annotations

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/class-diagram.mdx

Demonstrates how to add annotations like '<<interface>>' and '<<enumeration>>' to classes to provide additional metadata.

```pintora
classDiagram
  class Shape
  <<interface>> Shape
  Shape : vertices
  Shape : draw()

  class Color {
    <<enumeration>>
    Red
    Green
    Blue
  }
```

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

### Run Test Suite

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Executes a defined test suite and stores its artifacts in a specified directory.

```bash
pintora-harness run-suite --suite smoke --artifacts-dir artifacts/harness/smoke-run
```

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

### Define Components and Interfaces

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/component-diagram.mdx

Use keywords like `component` or brackets `[]` to define components. Interfaces can be defined with `()` or the `interface` keyword. Aliases can be created using `as`.

```pintora
componentDiagram
  title: Component Diagram Components and Interfaces

  component comp1
  [comp2]
  [component 3] as comp3
  component comp4 [
    This component has
    long description
  ]

  interface "I1"
  () "I2"
  () "I3" as interf3
```

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

### Binding Diagram Event Listeners

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/api-usage.md

Example of binding event listeners for 'click' and 'mouseenter' events using `pintora.diagramEventManager.on`. Note that only listeners bound before `renderTo` will be triggered.

```ts
const disposeClickListener = pintora.diagramEventManager.on('click', (item) => {
  console.log('diagramEvent click', item)
})

pintora.renderTo(code, {...configs})

const disposeMouseenterListener = pintora.diagramEventManager.on('mouseenter', (item) => {
  console.log('diagramEvent mouseenter', item)
})
```

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

### Visualize Package Dependencies

Source: https://github.com/hikerpig/pintora/blob/master/CONTRIBUTING.md

Use this command to generate an HTML file visualizing the dependency graph between packages in the monorepo.

```sh
pnpm exec turbo run compile --graph=dep-graph.html
```

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

### Drawing Pie Chart Title

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/write-a-custom-diagram.md

Adds a text mark for the diagram title if present. The title is centered horizontally and affects the starting vertical position of the pie chart.

```typescript
    const radius = conf.circleRadius

    let circleStartY = conf.diagramPadding
    let circleStartX = conf.diagramPadding

    if (diagramIR.title) {
      const titleMark = pintora.util.makeMark('text', {
        text: diagramIR.title,
        x: circleStartX + radius,
        y: circleStartY + 10,
        fill: 'black',
        fontSize: 16,
        fontWeight: 'bold',
        textBaseline: 'middle',
        textAlign: 'center',
      })
      rootMark.children.push(titleMark)
      circleStartY += 30
    }
```

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

### Render with Dark Theme

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Render a Pintora DSL file using the 'dark' theme. Use the `--theme` option to apply different visual styles.

```sh
pintora render -i ../test-shared/example-files/sequence-2.pintora --theme dark -o sequence-2.jpg
```

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

### Run-Suite Aggregated Review JSON

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Example JSON structure for aggregated review results from a test suite. This includes counts of different review outcomes and a list of individual cases.

```json
{
  "suite": "smoke",
  "total": 10,
  "ok": 6,
  "suspicious": 2,
  "fail": 0,
  "captureBrowserTriggeredCount": 1,
  "accepted": 2,
  "needsRepair": 1,
  "needsRerun": 0,
  "escalated": 1,
  "reviewPending": 0,
  "cases": [...] 
}
```

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

### Capture Browser Diagram with Input and Base URL

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Captures a browser view of a diagram using an input file, a base URL, and a specified viewport size.

```bash
pintora-harness capture-browser --input ./tmp/case.pintora --out-dir artifacts/harness/dev --base-url http://localhost:3001/demo/preview/ --viewport 1440x960
```

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

### Available Diagram Events Data Shape

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/diagram-event.md

Example data shapes for different diagram types (er, sequence) when events are triggered. This interface can be extended for new diagram types.

```typescript
interface PintoraDiagramItemDatas {
  er: {
    entity: Entity
    relationship: Relationship
  }
  sequence: {
    actor: Actor
    message: Message
  }
}
```

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

### Run Individual Case

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Executes a single test case and stores its artifacts in a specified directory.

```bash
pintora-harness run-case --case er.relationship-spacing-01 --artifacts-dir artifacts/harness/dev/er.relationship-spacing-01
```

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

### Initialize Pintora in Browser (UMD)

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/getting-started/usage.mdx

Include the UMD build script and initialize Pintora for browser usage. This is suitable for direct script tag inclusion.

```html
<script src="https://cdn.jsdelivr.net/npm/@pintora/standalone/lib/pintora-standalone.umd.js"></script>

<script>
  pintora.default.initBrowser()
</script>
```

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

### Render with Custom Background Color

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Render a Pintora DSL file to a JPG image with a specified background color. Use the `-b` or `--background-color` option.

```sh
pintora render -i ../test-shared/example-files/sequence-2.pintora -b "#FAFAFA" -o sequence-2.jpg
```

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

### Group Components and Interfaces

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/component-diagram.mdx

Organize elements into logical groups using keywords like `package`, `node`, `folder`, `frame`, `cloud`, `database`, `rectangle`, and `component`. Use curly braces `{}` to define the scope of a group.

```pintora
componentDiagram

package "Some Group" {
  [First Component]
  HTTP -- [First Component]
  [Another Component]
}

node "Other Groups" {
  [Second Component]
  FTP -- [Second Component]
  [First Component] --> FTP
}

cloud "Cloud" {
  [Example 1]
}

database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}

[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
```

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

### Watch Packages for Browser Changes

Source: https://github.com/hikerpig/pintora/blob/master/CONTRIBUTING.md

Execute this script to continuously watch for changes in the packages and apply them to the browser-based demo.

```sh
./scripts/watch-for-browser.sh
```

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

### Render Pie Chart in HTML

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/write-a-custom-diagram.md

Include Pintora standalone and the pie chart diagram script in an HTML file to render diagrams. Initialize the browser rendering with `pintora.default.initBrowser()`.

```html
<section>
    <div className="pintora">
      pie
        title Bag of Fruits
        "apple" 5
        "peach" 6
        "banana" 2
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/@pintora/standalone/lib/pintora-standalone.umd.js"></script>
  <script src="./dist/pintora-diagram-pie-chart.umd.js"></script>
  <script>
    pintora.default.initBrowser()
  </script>

```

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

### Render DSL to PNG Image

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Render a Pintora DSL file to a PNG image. Specify the input DSL file and the output image path.

```sh
pintora render -i ../test-shared/example-files/sequence.pintora -o sequence.png
```

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

### Dividing Sequence Diagrams

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/sequence-diagram.mdx

Demonstrates how to use a divider with a description to visually separate sections of a sequence diagram.

```pintora
sequenceDiagram
  Frida->>Georgia: I like your paintings about flowers
  == Totally fictional ==
  Georgia->>Frida: I like your portraits
  == They didn't have this conversation ==
  Frida-->>Frida: I like flowers on my hair, too
```

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

### Review Case Artifacts with No-Op Adapter

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Reviews case artifacts using a no-operation adapter and outputs the review data.

```bash
pintora-harness review-case --artifacts artifacts/harness/dev --adapter noop --out artifacts/harness/dev/review.json
```

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

### Simple Action in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Define basic actions in an activity diagram using colons and semicolons. Each action is a distinct step in the workflow.

```pintora
activityDiagram
  title: Activity Diagram Simple Action
  :Action 1;
  :Action 2;
```

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

### Capture Browser Diagram

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Captures a browser view of a diagram for a specified case and saves it to a directory.

```bash
pintora-harness capture-browser --case er.relationship-spacing-01 --out-dir artifacts/harness/dev
```

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

### Compile All Packages

Source: https://github.com/hikerpig/pintora/blob/master/CONTRIBUTING.md

Compile all packages within the monorepo, preparing them for potential publishing.

```sh
pnpm run compile
```

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

### Override Diagram Configuration

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/sequence-diagram.mdx

Demonstrates how to override default diagram configurations using the '@param' directive, including line colors, background colors, and font properties.

```pintora
sequenceDiagram
  @param loopLineColor #79caf1
  @param actorBackground #61afef
  @param actorTextColor #ffffff
  @param {
    messageFontFamily Consolas
    dividerTextColor #61afef
  }
  User->>Pintora: render this
  activate Pintora
  loop Check input
    Pintora-->>Pintora: Has input changed?
  end
  == Divider ==
```

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

### Relations with Labels and Cardinality

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/class-diagram.mdx

Shows how to add labels and cardinality to relations between classes using colons and double quotes.

```pintora
classDiagram
  classA "1" *-- "many" classB : contains
  classC o-- classD : aggregation
  classE --> "1" classF
```

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

### Grouping Actions in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Organize actions into groups using `group` or `partition` keywords. Optional background colors can be specified using hex codes.

```pintora
activityDiagram
  start
  partition Init {
    :Read config;

    group #88bbf4 "Inner Process" {
      :Init themes;
      :Init symbols;
    }
  }
  end
```

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

### Render with Custom Width

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-cli/README.md

Render a Pintora DSL file with a specified canvas width. The `core.useMaxWidth` option is set to true by default when width is provided.

```sh
pintora render -i ../test-shared/example-files/sequence.pintora --width 1000 -o sequence-w-1000.jpg
```

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

### Applying Config to a Single Render

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/config.md

Apply configurations to a specific render instance without affecting the global settings. Useful for localized styling or behavior.

```APIDOC
## Apply Config to Just One Render

### Description
When using `@pintora/standalone` in the browser, you can apply configuration options to a single render operation. This is done by passing a `config` object to the `renderTo` method, which will not alter the global configuration.

### Method
`pintora.default.renderTo(code: string, options: { container: HTMLElement, config?: PintoraConfig }): Promise<void>`

### Parameters
#### Request Body (options.config)
- **config** (PintoraConfig) - Optional - Configuration object specific to this render.
  - **themeConfig** (object) - Optional - Theme-specific settings.
    - **theme** (string) - Optional - The name of the theme to apply (e.g., 'dark').

### Request Example
```ts
pintora.default.renderTo(code, {
  container,
  config: {
    themeConfig: {
      theme: 'dark',
    }
  }
})
```
```

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

### Adding Notes in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Attach notes to actions using `@note` with optional placement (`left`, `right`). Multiline notes require `@start_note` and `@end_note`.

```pintora
activityDiagram
  start
  :Some action;
  @note right: note on the right

  if (diagram registered ?) then
    :get implementation;
  else (no)
    :print error;
  endif

  @start_note left
  left multiline note,
  no colon after placement
  @end_note
  end
```

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

### AI and Link Management

Source: https://github.com/hikerpig/pintora/blob/master/AGENTS.md

Manages AI-related skills by symlinking them into tool directories and validates links within the AI documentation and AGENTS.md files.

```bash
pnpm ai:link        # symlink .ai/skills into tool dirs
pnpm ai:lint        # validate .ai/ and AGENTS.md links
```

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

### Switch and Case Statements in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Use `switch`, `case`, and `endswitch` to implement switch-case logic within activity diagrams. Each `case` represents a distinct condition.

```pintora
activityDiagram
  switch (test ?)
  case ( condition A )
    :Text 1;
  case ( condition B )
    :Text 2;
  case ( condition C )
    :Text 3;
  endswitch
```

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

### Declaring Class Members

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/class-diagram.mdx

Shows how to declare fields and methods within a class, including type and name order flexibility.

```pintora
classDiagram
  class Fruit {
    float sweetness

    squeeze()
  }

  Fruit : getAge(): float
```

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

### While Loop in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Create while loops in activity diagrams using `while` and `endwhile`. Labels can be added after `endwhile` or using the `is` keyword.

```pintora
activityDiagram
  start
  while (data available)
    :read data;
    :generate diagrams;
  endwhile

  while (met another test) is (yes)
    :do something;
  endwhile (done)
  end
```

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

### Render SVG Diagram

Source: https://github.com/hikerpig/pintora/blob/master/packages/pintora-harness/README.md

Renders a diagram from a specified case and outputs it as an SVG file.

```bash
pintora-harness render-svg --case er.relationship-spacing-01 --out artifacts/harness/dev/render.svg
```

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

### Global Configuration API

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/configuration/config.md

Manage global configurations for Pintora using `setConfig` and `getConfig` methods. This affects all subsequent renders unless overridden.

```APIDOC
## Global Configuration API

### Description
Set or get the global configuration for Pintora. `setConfig` allows you to define default rendering options, fonts, and other global settings. `getConfig` retrieves the current global configuration.

### Method
`pintora.default.setConfig(config: PintoraConfig): void`
`pintora.default.getConfig(): PintoraConfig`

### Parameters
#### Request Body (setConfig)
- **config** (PintoraConfig) - Required - An object containing the configuration settings.

### Request Example (setConfig)
```js
pintora.default.setConfig({
  core: {
    defalutRenderer: 'canvas',
    defaultFontFamily: 'Menlo',
  },
  sequence: {
    messageFontSize: 16,
  },
})
```

### Response (getConfig)
- **PintoraConfig** (object) - The current global configuration object.

### Response Example (getConfig)
```ts
// Returns the current configuration object
pintora.default.getConfig()
```
```

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

### Conditional Logic in Activity Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/activity-diagram.mdx

Implement conditional branching in activity diagrams using `if`, `then`, and `else` keywords. Labels for branches can be specified in parentheses.

```pintora
activityDiagram
  if (diagram registered ?) then
    :get implementation;
  else (no)
    :print error;
  endif
```

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

### Using @pre Block for Diagram Configuration

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/pre-block.md

Demonstrates how to use a pre block to set background color and title for a class diagram. The `@pre` block must precede the diagram definition.

```pintora
@pre
@param entityBackground #61afef
@title @pre block example
@endpre

classDiagram
  class Animal {
  }

  class Dog {
    void bark()
  }

  Animal <|-- Dog

```

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

### Multiline Notes in Sequence Diagram

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/sequence-diagram.mdx

Demonstrates how to add notes to sequence diagrams, including multiline notes and notes positioned to the right or left of participants.

```pintora
sequenceDiagram
  Frida-->>Georgia: Flowers are beautiful
  @note over Frida,Georgia: Painters
  @note right of Georgia: Right
  @start_note left of Georgia
  multiline
  note
  @end_note
```

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

### Entity Relationship Diagram with Inheritance

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/er-diagram.mdx

Illustrates inheritance between entities using the 'inherit' keyword. Useful for representing specialization hierarchies.

```pintora
erDiagram
  person {
    int age
    string phone_number
  }

  customer inherit person
  deliverer inherit person

  %% some extra attributes for customer
  customer {
    string address
  }
```

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

### Apply Custom Styles with Selectors

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/component-diagram.mdx

Style specific components or interfaces using CSS selectors. Use `node-{name}` for IDs, and `.component__interface` or `.component__component` for classes.

```pintora
@pre
@style {
  .component__interface {
    backgroundColor: #61afef;
  }

  #node-IDeletable {
    backgroundColor: red;
  }
}
@endpre

componentDiagram
  [folder]
  () IAccessible
  () IDeletable
  [folder] --> IAccessible
  [folder] --> IDeletable
```

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

### Define Node and Edge Styles

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/dot-diagram.mdx

Shows how to apply different styles to nodes and edges, including 'solid', 'dashed', 'dotted', 'bold', and 'invis' (invisible). The `style` attribute can be used for both nodes and edges to control their appearance.

```pintora
dotDiagram
  @param ranksep 30
  digraph {
    bgcolor="#faf5f5";
    node [color="#111",bgcolor=orange]

    s1 [style="solid"]
    s2 [style="dashed"]
    s3 [style="dotted"]
    s4 [style="bold"]

    s1 -> e1 [style="solid"]
    s2 -> e2 [style="dashed"]
    s3 -> e3 [style="dotted"]
    s4 -> e4 [style="bold"]
    s5 -> e5 [style="invis"]
  }
```

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

### Override Class Diagram Configuration

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/diagrams/class-diagram.mdx

Demonstrates how to override diagram configurations, such as entity background color, using the '@param' directive.

```pintora
classDiagram
  @param entityBackground #61afef

  class Animal {
  }

  class Dog {
    void bark()
  }

  Animal <|-- Dog
```

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

### Registering a New Diagram Type

Source: https://github.com/hikerpig/pintora/blob/master/website/docs/advanced/technical-brief.md

Demonstrates how to define a new diagram and register it with Pintora's diagram registry. Ensure you have the necessary imports from '@pintora/core' and '@pintora/standalone'.

```typescript
import { IDiagram } from '@pintora/core'
import pintora from '@pintora/standalone'

const diagramDefinition: IDiagram = { ... }

pintora.diagramRegistry.registerDiagram(diagramDefinition)
```