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:

Browser and Web Components

pintora-stencil - Pintora Web Components, this project comes with web component for showing pintora diagram preview, add it into your website simply by import some script tags.

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