テキストベースダイアグラム作成ツールによるセブンチャートの表現

関田 巖1），竹下 浩2）

筑波技術大学　保健科学部　情報システム学科1）
筑波技術大学　保健科学部2）

要旨：フローチャートなどのダイアグラムは，晴眼者にとって内容の理解や情報の整理に有効な手段であるが，視覚障害者にとってはアクセスが困難であり，触図に頼ることが多い。触図の作成にはコストと時間がかかり，リアルタイムでのオンライン会議での利用も難しい。テキストベースのダイアグラム作成ツールであるMermaidやPlantUMLは，テキストを用いて要素間の関係性を表現でき，視覚障害者でも利用可能である。本研究は，未検討だったセブンチャート（文章の図解変換技法）をMermaidおよびPlantUMLで表現する方法について検討し，PlantUMLを用いることでセブンチャートに近い表現が可能であることを示す。さらに，作成および編集を容易にするために，簡略化したセブンチャートの表現例を提案する。特に，PlantUMLのアクティビティ図を用いることで，セブンチャートを簡便に表現できることを示し，その具体的な記述例を提示する。今後の課題は，視覚障害者側の理解・記述面の評価，受け手側の図解の有用性の評価である。
キーワード：セブンチャート，ダイアグラム，PlantUML，Mermaid

１．はじめに
　晴眼者にとって，フローチャートなどのダイアグラムは，内容の理解を促進するための有効な手段であり，表示して利用する際だけでなく，作成時にも伝えたい内容を整理するのに役立つ。
　例えば，概念マップや知識マップ[1]は，情報を視覚化し構造化することで理解と記憶を促進し，コミュニケーションを円滑にし，アイデア創出や問題解決の支援になることが知られている[1]。また，安藤によるセブンチャート[2]は，理由から結論に至るまでの論理構造を明示するための手法で，文章が図解で表現される。
　一方で，視覚障害者にとってはダイアグラムの視認が困難である。弱視の場合，部分を拡大するため全体を脳内で再構成するには訓練が必要である。全盲の場合も，点字以外の触知には訓練が必要となる。触図の作成には時間とコストがかかり，かさばるという問題もある。また，オンライン会議でリアルタイムにダイアグラムを薄板でやりとりすることも難しい。
　MermaidやPlantUMLなどのテキストベースのダイアグラム作成ツールでは，テキストを用いてフローチャートなどの要素間の関係性を表現できる。テキスト形式であるため，生成や協働での編集・保守が容易であり，Markdownとも簡単に統合できる。これらは視覚障害者でも利用可能である。
　視覚障害者にとって，重要なスキルの１つに概念的スキルがある[3]。筆者らは，概念的スキル向上のためのチャート作成方法について，主にMermaidを用いた表現方法を検討してその結果を示した[4]。さらに検討中である。一方，セブンチャートは文章との対応を取りやすく，図を見たことが無い視覚障害者にとって理解し易いタイプのダイアグラムであると考えられるが，テキストベースでのダイアグラム化は未検討である。
　本稿では，セブンチャートをテキストベース（MermaidとPlantUML）で作成する方法について検討する。
　検討の結果，PlantUMLを用いることで，セブンチャートに近い表現が可能であることが示された。さらに，作成と編集を容易にするために，簡略化したセブンチャートの表現例を提案する。特に，セブンチャートは，文章のような時系列を表現したものなので，PlantUMLのアクティビティ図を使うことで簡便に表現できる。その具体的な記述例も示す。
　テキストベースのダイアグラム作成ツールは習得しやすいとされているが，プログラミングの書き方が無数にあるのと同様に，記述方法にも多様性が存在する。視覚障害者にとっての学びやすさ，理解しやすさ，書きやすさについては，今後さらなる検証が必要である。

２．準備：セブンチャート
　安藤によるセブンチャート[2]では，以下の7つのチャートが示されている。①センテンスチャート（文を分解して，以下の②～⑥に当てはまる論理を見つける），②定義チャート（事柄の定義を明記する），③ YES NOチャート（肯定／否定を明記する），④要素チャート（並列する事柄を明記する），⑤VSチャート（対立する事柄を明記する），⑥プロセスチャート（時系列の流れを明記する），⑦ランタンチャート（上記①～⑥を組み合わせたもの）。7種類存在するが，厳密には②～⑥の5種類が主要とされている[2]。。

３．セブンチャートのテキストベースでの表現
　ここでは，セブンチャートの②から⑥を組み合わせた⑦の具体的な図を通して，簡略化された表現方法を提案する。
３．１　セブンチャートのほぼ忠実な表現
　セブンチャートの枠の形状は四角形であるが，YESNOチャートとVSチャートにおいては，比較であることを強調するために上下が平らな六角形を採用する。一般的なフローチャートでは，比較にはダイヤ形が用いられるが，六角形にすることで紙面スペースの削減が可能となっている。
　Mermaidでは，プロセスチャート内の矢印を横方向に表現できないため，PlantUMLで記述した例のみを示す。
　図1では，PlantUMLを使用して，②定義チャート，③YESNOチャート，④要素チャート，⑤VSチャート，⑥プロセスチャートを順に並べた⑦ランタンチャートを示す。ただし，②～⑤までの各チャート内は実線で表現し，各チャート間は点線矢印で示す。
　ここでは，PlantUMLのパッケージ図を採用し，パッケージ（package）を矩形（rectangle）に変更して記述している。
PlantUMLのリストは以下のとおりである。

@startuml
skinparam ranksep 20
skinparam nodesep 20
rectangle "** 定義チャート**" as 定義チャート
rectangle " 定義した文章" as 定義文章
定義チャート --> 定義文章
hexagon "**YES NOチャート**" as YESNOチャート
rectangle " 事柄①：A" as YN 事柄A
rectangle " 事柄②：B" as YN 事柄B
YESNOチャート --> YN 事柄A : "NO ×"
YESNOチャート --> YN 事柄B : "YES ◯ "
定義文章 ~~> YESNO チャート
rectangle "** 要素チャート**" as 要素チャート
rectangle " 事柄①：A" as 要素A
rectangle " 事柄②：B" as 要素B
rectangle " 事柄③：C" as 要素C
要素チャート -- 要素A
要素チャート -- 要素B
要素チャート -- 要素C
YN 事柄A ~~> 要素チャート
YN 事柄B ~~> 要素チャート
hexagon "**VSチャート**" as VSチャート
rectangle "A" as VS 事柄A
rectangle "B" as VS 事柄B
VS チャート --> VS 事柄A : " 事柄① "
VS チャート --> VS 事柄B : " 事柄② "
要素A ~~> VS チャート
要素B ~~> VS チャート
要素C ~~> VS チャート
rectangle "** プロセスチャート**" as プロセスチャート
rectangle " 事柄①：A" as プロセスA
rectangle " 事柄②：B" as プロセスB
rectangle " 事柄③：C" as プロセスC
プロセスチャート -- プロセスA
プロセスチャート -- プロセスB
プロセスチャート -- プロセスC
プロセスA => プロセスB
プロセスB => プロセスC
VS 事柄A ~~> プロセスチャート
VS 事柄B ~~> プロセスチャート
@enduml

３．２　セブンチャートの簡略的表現
　セブンチャートは，作成しながら検討を加え，完成形に近づけていく。このため，記述の容易さも重要であると考え，要素チャートとプロセスチャートを簡略化し，さらにその一体感を持たせるために，定義チャートも同様に簡略化してみる。
　図1を簡略化した表現を，PlantUMLのパッケージ図で記述したものを図2に，Mermaidで記述したものを図3に示す。紙面の都合上，図形のみを示す。

図1　PlantUMLによるセブンチャート例
図2　PlantUMLのパッケージ図による簡略表現したセブンチャート例
図3　Mermaidによる簡略表現したセブンチャート例

４．簡略化したセブンチャートのアクティビティ図による表現
　セブンチャートは，「理由から結論まで」の論理の「動的な流れ」を表現している。さらに，図2および図3で示した簡略化された表現では，枠の形状は2種類に限定されている。これにより，PlantUMLのパッケージ図よりも，ラベルの記述が不要なアクティビティ図での表現方法が適していることがわかる。
　アクティビティ図で図2や図3を表現した場合，以下のリストに基づいて図4が得られる。

@startuml
：** 定義チャート**
定義した文章；
if(**YES NO チャート**)then(NO ×)
：事柄①：A；
else(YES ◯ )
：事柄②：B；
endif
：** 要素チャート**
事柄①：A
事柄②：B
事柄③：C；
if(**VS チャート**)then( 事柄① )
：A；
else( 事柄② )
：B；
endif
：** プロセスチャート**
事柄①：A
↓
事柄②：B
↓
事柄③：C；
@enduml

図4　PlantUMLのアクティビティ図による簡略表現したセブンチャート例

５．「まえがき」の簡略化したセブンチャート
　本稿のまえがきを，簡略化したセブンチャートとしてPlantUMLのアクティビティ図で表現する。ここでは，「ダイアグラムの有効性」と「テキストベースのダイアグラムの有効性」という並列の関係を，forkを用いて明示している。
　以下のリストに基づいて，図５が得られる。

@startuml
fork
：** ダイアグラムの有効性① **：
内容の理解促進に有効な手段であり，
表示して利用する際だけでなく，
作成時にも伝えたい内容を整理するのに役立つ。
** ダイアグラムの有効性② **：
** 概念マップ** や** 知識マップ**[1] は，
・情報の視覚化や構造化
・理解と記憶を促進
・コミュニケーションを円滑化
・アイデア創出や問題解決の支援
** ダイアグラムの有効性③ **：
** 安藤によるセブンチャート**[2]は，
** 理由から結論に至るまでの論理構造を見えやすく** する手法で，
文章が図解で表現される。;
：** ダイアグラムの課題**：
：** 課題① **：** 視覚障害者はダイアグラムを利用しにくい**
・弱視の場合，部分を拡大するため全体を脳内で再構成するには訓練が必要。
・全盲の場合，触図を理解する際，点字以外の触知には訓練が必要。
** 課題③ **：** 触図の不便**
・作成には，時間とコストがかかる。
・かさばる。
・オンライン会議での協働も困難；
fork again
：** テキストベースダイアグラムの有効性**：
・** テキストで要素間の関係性を表現** 可能
・テキストなので，** 生成や協働での編集，保守をしやすい**
・**Markdownと容易に統合可能**
・** 視覚障害者も読むことが可能**；
end fork
if(視覚障害者に重要な** 概念的スキル[3]向上**に向けてのテキストベースダイアグラム化) then (概念マップや知識マップ)
：** 文献[4] で検討**し，さらに検討中；
else( セブンチャート)
：文章との対応がとりやすく，
期待：視覚障害者にとって** 理解しやすいタイプのダイアグラム**；
：** 問題**：** テキストベースのダイアグラム化は未検討**；
end if
：本稿の目的：
** セブンチャートをテキストベース（Mermaid, PlantUML）で作成する方法**を検討する；
：本稿の結果と考察：
・** セブンチャートに近い表現をPlantUMLで実現可能**
・作成と編集をよりしやすくするために，** 簡略化したセブンチャートの表現例を提案**
・**PlantUMLのアクティビティ図** により，簡便に表現できるので，その** 記述具体例を示す**；
：今後の課題：
テキストベースのダイアグラム作成ツールは習得しやすいと言われているが，
** 視覚障害者にとって学びやすさ，理解しやすさ，書きやすさについての検証** が課題；
@enduml

図5　まえがきの簡略化したセブンチャート（PlantUMLのアクティビティ図）

５．おわりに
　本稿では，セブンチャートをテキストベースで作成する方法について検討した。その結果，セブンチャートに近い表現をPlantUMLで実現できることを示した。また，PlantUMLのアクティビティ図により，簡便に表現できることを示した。今後の方向性は，視覚障害者側の触知による図解の理解と表現ニーズの満足度評価，ビジネス現場側の図解の有用性評価などが考えられる。

参照文献
[1] Nesbit J, and Adesope O. Learning with concept and knowledge maps: A meta-analysis, Review of Educational Research 2006; 76(3): pp.413-448.
[2] 安藤 芳樹．チャートで考えればうまくいく．第1版．Discover．2021．
[3] 竹下 浩．精神・発達・視覚障害者の就労スキルをどう開発するか．遠見書房．2020．
[4] 関田 巖，竹下 浩．視覚障害者の利用しやすさを目指したチャート記述法－Markdownによる－. 筑波技術大学テクノレポート. 2024; 31(1): pp.28-35.


Representation of the “Seven Charts” Using a Text-Based Diagram Creation Tool

SEKITA Iwao1), TAKESHITA Hiroshi2)

1)Department of Computer Science, Faculty of Health Sciences, Tsukuba University of Technology
2)Faculty of Health Sciences, Tsukuba University of Technology

Abstract: Diagrams are valuable tools for sighted individuals to enhance comprehension and organize information during both their creation and use. Visual tools like concept maps and knowledge maps have been proven to aid understanding, communication, and problem-solving.
However, visually impaired individuals can struggle to access diagrams and often require tactile diagrams, which are costly, time-consuming to produce, and impractical for real-time collaboration in online environments. Text-based diagram tools like Mermaid and PlantUML offer an accessible alternative that allows visually impaired users to create and modify diagrams using text. In this study, we explored the application of Mermaid and PlantUML to represent the Seven Charts, a logical structuring tool and found that PlantUML can closely mimic the original format. We also propose simplified representations to facilitate ease of creation and editing, particularly through the use of PlantUML’s activity diagrams. Further investigation is required to evaluate their accessibility for visually impaired users in terms of readability, ease of writing, and comprehension.
Keywords: the Seven Charts, diagram, PlantUML, Mermaid