Skip to main content

使用方法

Browser

UMD

使用 CDN 上的 UMD 版本:

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

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

一个 CodePen 的例子:

ESM

使用 Skaypack 上的 ESM 版本:

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

pintora.initBrowser()
</script>

一个 CodePen 的例子,使用 ESM 版本,以及注册和使用自定义主题:

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 是一个 Node.js 下的命令行程序,可快速生成图片。

全局安装:

npm i -g @pintora/cli

使用 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

选项:
--version 显示版本号 [布尔]
--help 显示帮助信息 [布尔]
-i, --input Input file path [必需]
-o, --output Output file path
-p, --pixel-ratio Pixel ratio [默认值: 2]
-b, --background-color Background color [默认值: "#fff"]
-t, --theme Pintora theme [默认值: "default"]
-w, --width 画布宽度

几个例子:

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

# 可以通过 -b 设置背景色
pintora render -i ../test-shared/example-files/sequence-2.pintora -b "#FAFAFA" -o sequence-2.jpg

# 通过 `--theme` 指定 pintora 主题为 `dark`
pintora render -i ../test-shared/example-files/sequence-2.pintora --theme dark -o sequence-2.jpg

# 通过 `--width` 指定输出图片宽度为 1000,且自动设置 `core.useMaxWidth` 为 true
pintora render -i ../test-shared/example-files/sequence.pintora --width 1000 -o sequence-w-1000.jpg