もくじ
- 1. 概要
- 2. 製品ラインアップ
- 3. OrgChart JS
- 4. FlowChart JS
- 5. FamilyTree JS
- 6. FamilyTree JS 2
- 7. OrgChart App
- 8. Family Tree App
- 9. BALKAN Code
- 10. 主な利用シーン
- 11. 一般的な比較観点
- 12. FAQ
1. 概要
Balkan App は、組織図、フローチャート、家系図といった構造化データを視覚化するためのインタラクティブな図表製品群を展開しています。ラインアップは大きく二つに分かれます。ひとつは JavaScript ベースでアプリケーションへ組み込める開発者向けライブラリ、もうひとつは組織図や家系図をすぐに扱える完成型アプリケーションです。これに加えて、HTML、JavaScript、CSS のコードを編集・実行・共有できる補助的な環境として BALKAN Code も提供されています。
この製品群の特徴は、単なる汎用グラフ描画ではなく、組織構造・業務フロー・親族関係といった具体的な用途に合わせた専用機能が最初から整理されている点にあります。組織図であれば階層構造や部門表示、フローチャートであればノードやリンクの編集、家系図であれば関係性の表現や系譜データへの対応など、用途に即した機能が前提として用意されています。
OrgChart JS は、組織図を Web アプリケーションに組み込みたい開発チーム向けの中核製品です。FlowChart JS は、業務フローやワークフローをインタラクティブに構築・編集したいケースに向いています。FamilyTree JS と FamilyTree JS 2 は、家系図や関係図をアプリケーションへ実装したい場合の専用ライブラリです。OrgChart App と Family Tree App は、ライブラリ実装よりも、まず完成したアプリケーションとして使いたい利用者に適しています。
また、Balkan App の製品は視覚的な見やすさだけでなく、エクスポート、編集、検索、テンプレート、連携、プライバシー配慮、オンプレミス対応の選択肢といった実運用上の要素にも踏み込んでいます。単に図を表示するだけでなく、組織運用、業務設計、データ公開、プレゼン資料化、社内外システム連携まで視野に入れた製品群として整理しやすいのが強みです。
2. 製品ラインアップ
Balkan App の公開製品は、用途別に次の三層で理解するとわかりやすくなります。
開発者向けライブラリ
- OrgChart JS:組織図向け JavaScript ライブラリ
- FlowChart JS:フローチャート向け JavaScript ライブラリ兼エディタ
- FamilyTree JS:家系図向け JavaScript ライブラリ
- FamilyTree JS 2:より複雑な関係表現や新しい API 方向性に対応した次世代家系図ライブラリ
完成型アプリケーション
- OrgChart App:組織図の作成・管理・共有に対応するアプリケーション
- Family Tree App:家系図の作成・カスタマイズ・共有に対応するアプリケーション
補助的なコード環境
- BALKAN Code:HTML、JavaScript、CSS を編集・実行・共有できるブラウザベースの環境
この構成により、Balkan App は「アプリへ組み込む」「完成品として使う」「試作・共有する」という三つの利用段階をカバーしています。導入目的が開発寄りか、運用寄りか、検証寄りかによって製品を選び分けやすいのが特徴です。
3. OrgChart JS
OrgChart JS は、Balkan App の組織図向け JavaScript ライブラリです。組織構造を視覚的に表現することに特化しており、単純な階層図から大規模な企業組織図まで、柔軟に構築できる点が大きな特徴です。
主な特長
OrgChart JS の大きな強みは、単なる組織図の描画にとどまらず、実務で必要になりやすい周辺機能まで含めて製品化されていることです。公開されている機能情報では、次のような要素が確認できます。
- エクスポート機能:PDF、PNG、SVG、CSV、XML、JSON、Visio 形式への出力に対応
- PowerPoint 関連機能:PowerPoint への出力や、PowerPoint / PDF のプレビュー関連コントロール
- 編集機能:編集フォーム、テンプレート変更、サブツリーの扱いなどに対応
- フィルタリング:条件に応じた表示制御が可能
- カスタマイズ:独自テンプレート作成や表示内容の拡張が可能
- フレームワーク連携:Angular、React、Next.js、Vue.js、Salesforce、Node API の利用シナリオが公開されている
- 大規模データへの対応:100,000 ノード規模でも動作することが案内されている
特に重要なのは、表示だけでなく検索・編集・出力・カスタムテンプレート・階層の部分展開まで製品の世界観に含まれている点です。組織図を単なる閲覧用コンポーネントではなく、社内ポータルや人事システム、ディレクトリ、経営資料作成の一部として扱いやすくなっています。
想定される用途
OrgChart JS は、次のような用途に向いています。
- 人事ポータルや社員ディレクトリへの組み込み
- 部門構造やレポートラインの可視化
- M&A 後の組織再編の可視化
- 複数事業部や地域をまたぐ大規模な組織構造の表示
- SaaS 製品への組織図機能の組み込み
- 経営会議向け資料や組織変更資料の出力
これらは製品ページにある大規模対応、エクスポート、編集、テンプレート、連携情報から自然に想定できる利用シーンです。
技術面での見どころ
OrgChart JS は 2014 年に登場して以来継続的に拡張されており、近年の情報では Tree List Layout や OrgScribe のような新しい表現・入力補助の方向性も示されています。長く使われてきた組織図ライブラリでありながら、新機能追加が続いている点は、長期利用を考える上でも注目しやすいポイントです。
プライバシーと配置の考え方
OrgChart JS では、PDF、PNG、Visio へのエクスポートおよび AI 関連機能の利用時に、データが既定では Balkan のサーバーへ一時的に送信・保存される仕様が案内されています。一方で、これらのサービスを自社サーバーにインストールして運用する選択肢も提示されています。そのため、エクスポートや AI 活用を検討する際は、機能面だけでなくデータ取り扱い方針や配置方法も合わせて確認しておくと整理しやすくなります。
まとめ
OrgChart JS は、組織図を美しく表示するためのライブラリというより、組織構造データを扱う業務アプリケーション向けの本格的な可視化基盤として理解しやすい製品です。大規模対応、エクスポート、編集性、フレームワーク連携、配置の柔軟性まで含めて、Balkan App の中でも中心的な存在といえます。
4. FlowChart JS
FlowChart JS は、Balkan App のフローチャート向け JavaScript ライブラリ兼エディタです。静的な図としてフローを表示するだけでなく、ブラウザ上でノードやリンクを操作しながら、インタラクティブなフロー編集環境を構築できる点が特長です。
主な特長
FlowChart JS では、フローチャートを素早く作成できることに加えて、UI 操作と API 操作の両方に対応していることが重要です。公開情報から確認できる主な内容は次のとおりです。
- ノード作成方法:「load」 メソッドまたは 「chart.nodes.add」による追加
- リンク作成方法:UI 上でポートをドラッグする方法、「load」 の利用、「chart.links.add」 による追加
- Undo / Redo:操作の取り消しとやり直しに対応
- セッション保持:Undo / Redo の情報はブラウザの 「sessionStorage」 に保存
- フレームワーク連携:React、Angular、Vue.js の利用例が整理されている
この構成により、FlowChart JS は「開発者がデータからフローチャートを生成する」ケースにも、「ユーザーが画面上でフローを編集する」ケースにも対応しやすくなっています。
向いている用途
FlowChart JS は、次のような業務で活用しやすい製品です。
- 業務フローや承認フローの可視化
- ワークフロー設計ツールへの組み込み
- 商品開発やプロセス設計のレビュー画面
- ロジック分岐を持つ教育・研修コンテンツ
- 顧客向けアプリケーション内のフロー編集機能
- 社内オペレーション設計用の図表 UI
製品としての見方
一般的な図形描画ライブラリでは、ノード、線、編集 UI、状態管理などを個別に設計する必要が出てきます。FlowChart JS は、最初からフローチャート用途に寄せて設計されているため、業務プロセスやワークフローを扱うアプリケーションの土台として整理しやすいのが利点です。単なる図のレンダラーではなく、編集可能なフローチャート環境として理解すると特徴がつかみやすくなります。
5. FamilyTree JS
FamilyTree JS は、家系図や親族関係の可視化に特化した JavaScript ライブラリです。親子関係や系譜データをブラウザで表現するための専用機能が整理されており、汎用ノード図では扱いづらい家系図ならではの表現を実装しやすいのが魅力です。
主な特長
公開されている情報からは、FamilyTree JS に次のような機能が確認できます。
- 編集フォーム:データ編集を支援する UI
- レイアウト制御:家系図の見せ方に合わせた構成調整
- 検索機能:家系内の人物探索
- エクスポート:出力機能に対応
- フレームワーク連携:Angular、React の利用例がある
また、エクスポート関連では、PDF と PNG の出力が既定では Balkan のエクスポートサーバーを利用することが案内されています。運用要件によっては、出力方式とデータ取り扱いを事前に整理しておくと導入検討が進めやすくなります。
向いている用途
FamilyTree JS は、次のようなケースに適しています。
- 家系図サービスや系譜データベースへの組み込み
- 歴史・文化・教育分野の人物関係図表示
- 出版、アーカイブ、デジタル展示向けの関係性可視化
- 人物同士のつながりを主題とする Web コンテンツ
- カスタム要件を伴う家系図表示プロジェクト
製品としての位置づけ
FamilyTree JS は、見た目のきれいな家系図を描くためだけのライブラリではありません。検索や編集、レイアウト制御といった機能を備えているため、家系図をデータとして扱うアプリケーションのベースとして検討しやすい製品です。親族関係や系譜を中心にした表現が必要な場合、汎用図表ツールよりも要件との対応関係が理解しやすくなります。
6. FamilyTree JS 2
FamilyTree JS 2 は、Balkan App が次世代版として位置づけている家系図ライブラリです。従来版と同じく柔軟でカスタマイズ可能な家系図ライブラリでありながら、より複雑な関係表現や、新しい API 方向性を重視した設計が特徴です。
主な特長
公開情報から整理できる FamilyTree JS 2 の注目点は次のとおりです。
- 複雑な関係性への対応:より入り組んだ家族関係・データ構造を扱いやすい
- 簡素化された API:実装しやすさを意識した方向性
- 複数の親ツリー展開:複数の親系統を同時に展開できる設計
- GEDCOM 取り込み:GEDCOM データを家系図メンバーへ変換する仕組みが案内されている
- オンデマンド読み込み:最初に一部だけ読み込み、必要に応じて追加ロードできる
- 条件付きカラー表示やテンプレート例:デモで実装パターンが確認できる
- Controls API:ツリー上の小さなアクションボタンを制御する仕組み
向いている用途
FamilyTree JS 2 は、次のようなケースで特に有力です。
- 複雑な親族関係を持つ大規模家系図
- GEDCOM ベースのデータ取り込みが必要なプロジェクト
- 段階的な読み込みで初期表示負荷を抑えたいケース
- 新規開発でより新しい API 設計を重視したい場合
- アーカイブ、教育、系譜サービスなどの専門用途
従来版との違い
FamilyTree JS と FamilyTree JS 2 は、どちらも家系図を扱うための製品ですが、FamilyTree JS 2 はより複雑な関係性、読み込み制御、データ取り込み、操作 API の柔軟性を重視した方向性が見えやすい構成です。新規導入で複雑性が高い案件では、まず FamilyTree JS 2 を中心に検討しやすい一方、既存資産や互換性の観点で FamilyTree JS が適する場合もあります。
まとめ
FamilyTree JS 2 は、単なる後継製品というより、複雑な系譜表現により踏み込むための発展型ライブラリとして理解しやすい製品です。特に GEDCOM とオンデマンド読み込みへの対応は、実データ運用を意識した場合に大きなポイントになります。
7. OrgChart App
OrgChart App は、組織図の作成・管理・共有を目的とした完成型アプリケーションです。ライブラリを使って一から実装するのではなく、すぐに利用できる組織図アプリケーションとして整理しやすいのが特長です。
主な特長
公開情報では、OrgChart App について次のような内容が案内されています。
- 組織図の作成・管理・共有に対応
- オンライン利用とオンプレミス利用の両方に対応
- OrgChart JS を基盤として構築されている
- インタラクティブな組織図の作成と編集を想定した設計
向いている用途
OrgChart App は、次のようなケースに向いています。
- 組織図をすぐ運用したい企業
- 人事部門や総務部門で組織構造を共有したいケース
- 社内ポータルへ深く組み込む前に、まず完成型アプリで運用したい場合
- オンプレミス環境で組織図を扱いたいケース
- 将来的に OrgChart JS による高度なカスタマイズへ発展させたい場面
製品としての位置づけ
OrgChart App は、開発リソースを前提とする OrgChart JS に対して、利用開始までの距離が短い完成型の選択肢として位置づけやすい製品です。組織図の作成・共有・運用を早く整えたい場合に適しており、完成品としての使いやすさと、将来的な拡張余地の両方を見やすい構成です。
8. Family Tree App
Family Tree App は、家系図の作成・カスタマイズ・共有に対応する完成型アプリケーションです。ライブラリ実装が前提ではなく、家系図を実際に作って使うことを目的とした製品として理解しやすくなっています。
主な特長
公開情報から確認できる主な特徴は次のとおりです。
- 家系図の作成、カスタマイズ、共有に対応
- Web アプリとして利用可能
- デスクトップ版が用意されている
- Android 向け提供も案内されている
- クリーンでモダンなデザインとシンプルな入力体験が打ち出されている
向いている用途
Family Tree App は、次のような用途に向いています。
- 家系図を手早く作成・整理したい個人または組織
- 教育・文化プロジェクトにおける人物関係の可視化
- 展示、出版、ドキュメンタリー補助資料としての家系図作成
- カスタム開発の前に家系図運用を先行して始めたいケース
製品としての位置づけ
Family Tree App は、FamilyTree JS や FamilyTree JS 2 のような開発者向けライブラリに対して、非開発者でも扱いやすい完成型の選択肢といえます。独自機能の深い実装よりも、まず家系図を作成・共有・整理することを重視する場合に整理しやすい製品です。
9. BALKAN Code
BALKAN Code は、HTML、JavaScript、CSS を 1 つの画面で編集・実行・共有できるブラウザベースの環境です。Balkan App の主要な図表製品そのものではありませんが、製品検証やサンプル共有を補助する役割を持つツールとして理解しやすい位置づけです。
主な特長
- HTML、JavaScript、CSS の編集・実行・共有に対応
- コード例の確認や簡易的な検証に使いやすい
- 製品導入前の試作、サンプル提示、再現用の共有に向いている
利用時の注意点
BALKAN Code では、作成したコードが他者に利用され得る条件が案内されています。そのため、機密性の高いコードや非公開前提の実装作業よりは、共有を前提としたサンプル、デモ、簡易検証、公開可能なコード片のための環境として理解するのが適切です。
製品群の中での役割
BALKAN Code は売上の中心となる主製品というより、検証・説明・試作を円滑にする補助環境です。OrgChart JS や FlowChart JS、FamilyTree 系製品の挙動を短時間で示したいときや、実装イメージを共有したいときに役立ちます。
10. 主な利用シーン
人事・組織運用・デジタルワークプレイス
OrgChart JS と OrgChart App は、人事部門、総務部門、社内ポータル運用に適した製品です。組織変更、兼務、部門構成、レポートラインなどを可視化したい場合、静的な資料だけでは追従が難しくなります。OrgChart JS は既存システムやポータルに組み込みやすく、OrgChart App は完成型アプリとして組織図運用を始めやすい構成です。
業務設計・プロセス可視化・ワークフロー管理
FlowChart JS は、承認フロー、作業フロー、分岐ロジック、設計レビューなど、手順や判断経路を視覚化したい場面に向いています。API による生成と UI による編集を両立できるため、システム側で定義したフローを表示する用途にも、利用者自身が流れを編集する用途にも対応しやすくなっています。
SaaS・業務アプリへの組み込み
OrgChart JS、FlowChart JS、FamilyTree JS、FamilyTree JS 2 は、いずれも Web アプリケーションへ組み込む前提で整理しやすい製品です。SaaS 製品の一機能として組織図、フロー図、人物関係図を提供したい場合、汎用描画エンジンをベースに独自実装するよりも、用途に合った専用ライブラリから始める方が構成を理解しやすいケースがあります。
系譜、歴史、教育、アーカイブ、出版
FamilyTree JS と FamilyTree JS 2、Family Tree App は、家系図そのものだけでなく、人物関係を視覚化する用途にも向いています。たとえば、歴史資料、系譜アーカイブ、教育コンテンツ、出版物の補助表示、人物相関の説明など、血縁や親族関係を中心とした情報表現に適しています。特に FamilyTree JS 2 は GEDCOM 取り込みやオンデマンド読み込みがあるため、実データが大きいケースにも検討しやすい構成です。
デモ、PoC、実装イメージ共有
BALKAN Code は、各製品を使ったサンプル、簡易プロトタイプ、画面イメージ共有に向いています。正式な開発環境ではなくても、挙動確認や方向性の共有を短時間で進めやすいのが利点です。
プライバシー配慮やオンプレミス運用が必要な場面
OrgChart App にはオンラインとオンプレミスの両方が案内されており、OrgChart JS ではエクスポートや AI 機能に関して自社サーバー運用の選択肢が示されています。データ配置や処理経路を重視する案件では、この点が大きな検討ポイントになります。
11. 一般的な比較観点
Balkan App の製品群を一般的な他製品と比較する場合、特定メーカー名を挙げるよりも、次のような観点で整理すると違いが見えやすくなります。
1. 汎用図表ライブラリか、用途特化型か
一般的な図表ツールやノード図ライブラリは自由度が高い一方で、組織図、家系図、業務フローに必要な仕様を個別に組み立てる必要が出やすくなります。Balkan App の製品は、最初から組織図、フローチャート、家系図という具体的な用途に寄せて設計されているため、要件との対応関係を整理しやすいのが特徴です。
2. 表示専用か、編集や運用まで含むか
単に図を表示するだけのツールもありますが、Balkan App の製品群では、編集フォーム、フィルタ、ノード追加、リンク追加、検索、エクスポートなど、運用を前提とした機能が見えやすくなっています。図を作って終わりではなく、更新・共有・運用まで視野に入れる場合に比較しやすいポイントです。
3. ライブラリ型か、完成型アプリ型か
市場には開発者向け部品のみを提供する製品と、完成型のアプリケーションだけを提供する製品があります。Balkan App はその両方を持っているため、組み込み型と完成型のどちらが適切かを検討しやすい構成です。
4. エクスポートや資料化への対応
業務では、画面表示だけでなく、PDF や画像、表形式データ、プレゼンテーション関連の出力が必要になる場合があります。OrgChart JS はこの点で機能が比較的充実しており、表示後の活用範囲まで考慮しやすい製品です。
5. 配置とデータ取り扱いの考え方
機能比較だけでなく、どこで処理されるか、どの機能がサーバー処理を伴うか、自社管理環境へ寄せられるかも重要です。OrgChart JS や OrgChart App は、この観点を含めて整理しやすい製品です。
6. 長期利用を見据えた発展性
継続的な製品拡張や次世代版の存在は、長期運用を考えるうえで見逃しにくいポイントです。OrgChart JS の継続的な機能追加や、FamilyTree JS 2 の次世代方向性は、今後の発展性を考える際の参考になります。
12. FAQ
Balkan App とは何ですか?
Balkan App は、組織図、フローチャート、家系図といった構造化データを可視化するためのソフトウェア製品群を展開するメーカーです。公開製品には、OrgChart JS、FlowChart JS、FamilyTree JS、FamilyTree JS 2、OrgChart App、Family Tree App があり、補助的なコード共有環境として BALKAN Code も用意されています。
開発者が最初に見るべき製品はどれですか?
扱いたいデータ構造によります。組織構造なら OrgChart JS、業務フローなら FlowChart JS、家系図や親族関係なら FamilyTree JS または FamilyTree JS 2 が候補になります。複雑な関係性、GEDCOM、オンデマンド読み込みが重要なら FamilyTree JS 2 を優先的に検討しやすくなります。
OrgChart JS と OrgChart App の違いは何ですか?
OrgChart JS は、組織図を自社 Web アプリケーションへ組み込むための開発者向けライブラリです。OrgChart App は、組織図の作成・管理・共有を目的とした完成型アプリケーションです。柔軟な実装や深い連携が必要なら OrgChart JS、すぐに運用を始めたいなら OrgChart App が整理しやすい選択肢になります。
OrgChart JS はモダンな Web フレームワークに対応していますか?
公開情報では、Angular、React、Next.js、Vue.js、Salesforce、Node API の利用シナリオが案内されています。そのため、既存のフロントエンド構成へ組み込みやすい製品として理解しやすくなっています。
OrgChart JS はどのような形式に出力できますか?
PDF、PNG、SVG、CSV、XML、JSON、Visio 形式への出力が案内されています。さらに PowerPoint 関連のコントロールも用意されており、画面表示だけでなく、資料化や共有にも展開しやすいのが特徴です。
OrgChart JS は大規模組織にも向いていますか?
公開情報では 100,000 ノード規模でも動作すると案内されています。ただし、大規模な初回読み込みではバックエンドからのデータ取得方法などによって時間がかかる場合があります。大規模利用を前提とする場合は、表示性能だけでなくデータ供給の設計も合わせて考えると整理しやすくなります。
OrgChart JS には編集機能や絞り込み機能がありますか?
あります。編集フォーム、フィルタ、カスタムテンプレート、サブツリーなど、表示後の操作や運用を意識した機能が案内されています。
OrgChart JS に AI 関連機能はありますか?
あります。公開されている情報では、従業員追加、人数カウント、給与関連フィールドの変更、特定部分のハイライトなどの例が紹介されています。あわせて、AI 利用時のデータ取り扱いについても確認しておくと導入判断がしやすくなります。
OrgChart JS のエクスポートや AI 利用時のデータ取り扱いはどうなりますか?
PDF、PNG、Visio へのエクスポートおよび AI 関連機能では、既定で Balkan のサーバーが利用される仕様が案内されています。一方で、これらの機能を自社サーバー上で運用する選択肢も示されています。データ配置に要件がある場合は、この点が重要になります。
FamilyTree JS と FamilyTree JS 2 の違いは何ですか?
どちらも家系図向けの JavaScript 製品ですが、FamilyTree JS 2 は次世代版として位置づけられており、複雑な関係性への対応、簡素化された API、複数親系統の展開、GEDCOM 取り込み、オンデマンド読み込みなどが注目点です。新規案件で複雑性が高い場合は FamilyTree JS 2 が有力です。
FamilyTree JS 2 は GEDCOM に対応していますか?
対応しています。公開情報では、GEDCOM データを家系図メンバーへ変換する機能が案内されています。系譜データや既存の家系図データ資産を活用したい場合に重要なポイントです。
FamilyTree JS 2 は大規模データや段階的な読み込みに対応していますか?
対応しています。オンデマンド読み込みにより、最初に一部だけを表示し、必要に応じて追加の家族情報を読み込む構成が案内されています。初期表示負荷を抑えたいケースに向いています。
FamilyTree JS は FamilyTree JS 2 がある現在でも検討対象になりますか?
はい。両製品はそれぞれ独立して公開されており、FamilyTree JS 2 が次世代版として位置づけられている一方で、FamilyTree JS も継続して検討対象にしやすい製品です。既存資産との整合や要件の複雑性に応じて選び分けるのが自然です。
FamilyTree JS と Family Tree App の違いは何ですか?
FamilyTree JS と FamilyTree JS 2 は、家系図機能を自社システムに実装するための開発者向けライブラリです。Family Tree App は、家系図の作成・共有・整理を目的とした完成型アプリケーションです。独自実装や連携が必要ならライブラリ、まず運用を始めたいならアプリが整理しやすい選択肢になります。
Balkan App 製品群にオンプレミス対応はありますか?
あります。OrgChart App ではオンライン利用とオンプレミス利用が案内されています。また OrgChart JS では、エクスポートや AI 関連のサービスを自社サーバーで運用する選択肢が示されています。配置やデータ管理を重視する場合に確認しやすいポイントです。
BALKAN Code はどのような場面で役立ちますか?
BALKAN Code は、HTML、JavaScript、CSS のサンプルを編集・実行・共有したい場面に向いています。デモ、PoC、動作確認、実装イメージの共有などで役立ちます。ただし、共有を前提とした環境として理解し、機密性の高いコードには慎重に使い分けるのが適切です。
メーカーの製品サイトhttps://balkan.app/
【言語】英語


