Skip to main content

Usage

Browser​

UMD​

Use this UMD build:

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

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

Here is a CodePen example:

ESM​

Use this ESM build from Skypack:

<script type="module">
  import pintora from 'https://cdn.skypack.dev/@pintora/standalone'

  pintora.initBrowser()
</script>

Here is a CodePen example for using ESM version to register a custom theme:

CLI​

@pintora/cli is a simple multi-command command-line Node.js application.

You can install it globally with:

npm i -g @pintora/cli

Get some help with pintora --help:

pintora [command]

Commands:
  pintora render  Render DSL to diagram image

Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]

pintora render​

pintora render

Render DSL to diagram image

Options:
      --version           Show version number                          [boolean]
      --help              Show help                                    [boolean]
  -i, --input             Input file path                             [required]
  -o, --output            Output file path
  -p, --pixel-ratio       Pixel ratio                               [default: 2]
  -b, --background-color  Background color
  -t, --theme             Pintora theme                     [default: "default"]
  -w, --width             Canvas width

examples:

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

# Set image background color
pintora render -i ../test-shared/example-files/sequence-2.pintora -b "#FAFAFA" -o sequence-2.jpg

# Preview with theme 'dark'
pintora render -i ../test-shared/example-files/sequence-2.pintora --theme dark -o sequence-2.jpg

# Set canvas width to 1000, and set `core.useMaxWidth` to true by default
pintora render -i ../test-shared/example-files/sequence.pintora --width 1000 -o sequence-w-1000.jpg