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 版本，以及注册和使用自定义主题:

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