Web SDK

図形

プラグイン情報

図形機能を使用すると、ドキュメント内に図形や描画を挿入して編集できます。基本的な幾何学的図形、矢印、フローチャート要素などが含まれます。

はじめに

Univer Docs では、図形を使用して以下ができます：

  • 幾何学的図形を挿入：長方形、円、矢印などを追加します。
  • 外観をカスタマイズ：塗りつぶし色、枠線、テキストを調整します。
  • 自由に配置：図形をドキュメント内の任意の場所に配置します。

プラグインモード

インストール

Shell
pnpm add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

図形には @univerjs-pro/engine-formula の UniverProFormulaEnginePlugin も必要です。基本の初期化コードで、既存の UniverFormulaEnginePlugin のインポートと登録をこのプラグインに置き換えてください。両方の数式エンジンを登録すると、図形の挿入時に依存関係が未登録というエラーが発生する場合があります。

使用法

TypeScript
import { UniverDocsShapePlugin } from '@univerjs-pro/docs-shape'import { UniverDocsShapeUIPlugin } from '@univerjs-pro/docs-shape-ui'import DocsShapeUIJaJP from '@univerjs-pro/docs-shape-ui/locale/ja-JP'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-shape-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      DocsShapeUIJaJP,     ),  },})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverDocsShapePlugin)univer.registerPlugin(UniverDocsShapeUIPlugin)

Univer の商用ライセンスをお持ちの場合は、クライアントでのライセンス使用を参照してください。

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs-pro/docs-shape-uiUniverDocsShapeUIPluginUniverDocsShapeMobileUIPlugin

図形のテキストを編集する

以下または前の例で insertShape() が返す図形を使用します。getText() はライブの FShapeText オブジェクトを返します。getPlainText() でテキストを読み取り、setText() で全文を置き換え、フォント、色、配置を設定できます。

TypeScript
import '@univerjs-pro/docs-shape/facade'const document = univerAPI.getActiveDocument()const paragraph = document?.getParagraphs()[0]if (!document || !paragraph) throw new Error('No active document paragraph')const shape = document.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.Rect,  placement: {    wrappingStyle: univerAPI.Enum.TextWrappingStyle.INLINE,    anchor: { paragraphId: paragraph.getId(), segmentId: paragraph.getSegmentId() },  },})if (!shape) throw new Error('Shape is not available')const shapeText = shape.getText()console.log(shapeText.getPlainText())shapeText  .setText('Quarterly review')  .setFontSize(18)  .setColor('#2563eb')  .setBold(true)  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)  .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)

setText() は既存のテキストを置き換えます。複数の書式を使う場合は setRichText() を使用してください。既存のリッチテキストを編集するには getRichText()?.copy() でビルダーを取得し、編集後に setRichText() に渡します。ビルダーの変更だけでは反映されません。文字スタイルとテキストボックスの余白・レイアウトも参照してください。

TypeScript
const richText = univerAPI.newRichText()  .text('Quarterly ')  .bold('review')shapeText.setRichText(richText)

図形の書式コピー

元の図形を選択し、書式コピーを有効にして対象の図形を選びます。塗りつぶし、線、効果、対応する文字書式をコピーし、対象の ID、形状、文字内容、数式の関連付けは保持します。書式のクリアは挿入時の既定値に戻します。SmartArt は対象外です。対応する図形 UI プラグインが自動登録します。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.