1. 製品
  2.   ダイアグラム
  3.   Node.js
  4.   Pintora
 
  

インタラクティブな図を作成・変換する Node.js API

テキストを図に変換し、Node.js 環境内でさまざまな種類の図を管理できるオープンソース Node.js ライブラリ。

Pintora ライブラリとは何ですか？

Pintora は図の描画をシンプルにします。この柔軟な JavaScript ツールは、ブラウザでも Node.js でも、テキストを簡単に図に変換できます。Mermaid.js と PlantUML に触発され、Pintora は信頼性が高く使いやすい図作成手法を提供します。さまざまな開発環境にシームレスに適合し、様々なプロジェクトで汎用的に利用できます。Hikerpig は、フローチャート、シーケンス図、クラス図など多様な図を作成できる Pintora ライブラリを開発しました。ドキュメント、プレゼンテーション、技術仕様書に図を追加したい開発者やテクニカルライターに最適なツールです。このライブラリの特長は、幅広いカスタマイズオプションで独自の可視化を作成できる点です。

Pintora ライブラリを使用すれば、色、フォント、アニメーション、その他の要素を簡単に調整して、視覚的に魅力的なだけでなく、ブランドに合致し、メッセージを効果的に伝える可視化をデザインできます。これはソフトウェア開発者が驚くべきデータ可視化を作成する方法を変えています。オープンソースで、継続的に機能強化とコミュニティ支援のために定期的に更新されています。シンプルな構文は把握しやすく、さまざまな技術レベルの人に適しています。色や形状、その他の視覚的特徴を変更して、図の外観をニーズに合わせてカスタマイズできます。豊富な機能、使いやすい API、モダンなデザインにより、データ可視化を強化したい多くの人にとって Pintora ライブラリは人気の選択肢です。

Previous Next

Pintora の入門

Pintora ライブラリの推奨インストール方法は NPM を使用することです。スムーズなインストールのために、以下のコマンドをご利用ください。

NPM で Pintora をインストールする

 npm install pintora

Node.js でシーケンス図を作成する

オープンソースのPintoraライブラリは非常に扱いやすく、テキスト記述をNode.jsアプリ内で鮮やかな図にシームレスに変換する方法を提供します。数行のコードだけで、ソフトウェア開発者はPintoraライブラリを使用してシーケンス図を作成・管理できます。シーケンス図は、オブジェクトが特定の順序でどのように相互作用するかを示します。以下の例は、2人の参加者間の相互作用を示すシーケンス図が定義されていることを示しています。構文はそれらの間で交換されるメッセージを指定し、PintoraはNode.jsアプリケーション内で対応するSVGを生成します。

Node.js アプリ内でシーケンス図を作成する方法は？

const { renderToSvg } = require('pintora');

const sequenceDiagramDefinition = `
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good, thanks!
`;

// Render the sequence diagram to SVG
const svg = renderToSvg(sequenceDiagramDefinition);

// Output the SVG
console.log(svg);

Node.js アプリ内でダイアグラムをカスタマイズする

Pintoraライブラリは、さまざまな種類の図の広範なカスタマイズを完全にサポートします。このライブラリにより、ソフトウェア開発者は自分のNode.jsアプリケーション内でレイヤー、マスター、ページ、シェイプ、コネクタなどのさまざまな図要素を操作しやすくなります。色や形状、その他のビジュアル要素をニーズに合わせて変更できます。以下は、開発者がNode.jsライブラリを使用してフローチャートをカスタマイズする方法を示す例です。

Node.js アプリケーション内でフローチャートをカスタマイズする方法は？

const { renderToSvg } = require('pintora');

const customizedFlowchartDefinition = `
flowchart TD
    style A fill:#f9f,stroke:#333,stroke-width:4px;
    style B fill:#bbf,stroke:#333,stroke-width:4px;
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great]
    B -->|No| D[Fix it]
    D --> A
`;

// Render the customized flowchart to SVG
const svg = renderToSvg(customizedFlowchartDefinition);

// Output the SVG
console.log(svg);

Node.js 内でクラス図を作成・編集する

オープンソースの Pintora ライブラリは、Node.js アプリケーション内でクラス図を作成および管理するための完全な機能を提供しています。クラス図は、クラス、属性、関係を示すことでシステムの構造を説明するために使用されます。以下の例は、クラス図の作成方法を示しています。図は、Animal と Dog の 2 つのクラスとそれらの属性およびメソッドを定義しています。Dog クラスは Animal クラスから継承されており、<|-- 記法で示されています。

Node.js アプリ内でクラス図を作成する方法は？

const { renderToSvg } = require('pintora');

const classDiagramDefinition = `
classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
    }
    class Dog {
        +String breed
        +void bark()
    }
    Animal <|-- Dog
`;

// Render the class diagram to SVG
const svg = renderToSvg(classDiagramDefinition);

// Output the SVG
console.log(svg);
 日本