AI가 작성한 관계도를 브라우저에서 바로 움직일 수 있는 「FlowLite」를 만들었습니다

AI에게 문장을 작성하게 하는 것은 이제 상당히 자연스러운 일이 되었습니다.

하지만 문장만으로는 보기 어려운 것들이 있습니다.

예를 들어,

• 인물 간의 관계
• 논문 간의 영향 관계
• 신화의 가계도
• 세키가하라 전투의 각 무장 간의 관계
• 프로그램의 처리 플로우 (Flow)
• 소프트웨어의 구성
• 프로젝트 내의 파일 및 규칙의 관계

이것들은 문장으로 읽는 것보다 점과 선으로 보는 것이 더 빠를 때가 있습니다.

그래서, AI에게 관계도를 그리게 하고, 그것을 그대로 브라우저에서 움직일 수 있는 HTML 도구를 만들었습니다.

이름은 FlowLite입니다.

우선, 이것이 FlowLite입니다

실제로 만져볼 수 있으니 시도해 보세요.

FlowLite는 1파일 HTML 관계도 에디터입니다.

설치가 필요 없습니다.

브라우저에서 여는 것만으로 작동합니다.

하는 일은 단순합니다.

AI에게 관계도를 그리게 한다
↓
FlowLite에 붙여넣는다
...

예를 들어, AI에게 HTML을 다음과 같이 요청합니다.

드래곤볼의 인물 관계도를 FlowLite 형식으로 만들어 주세요.
포함했으면 하는 것:
- 주요 캐릭터
...

AI가 FlowLite 형식의 텍스트를 출력합니다.

그것을 FlowLite에 붙여넣으면, 브라우저 상에서 움직일 수 있는 관계도가 됩니다.

노드를 클릭하면 가까운 관계가 떠오릅니다

FlowLite는 「그림을 손으로 그리는 도구」가 아닙

FlowLite에는 전용 표기법이 있습니다.

하지만 기본적으로 인간이 열심히 외우기 위한 표기법은 아닙니다.

FlowLite의 HTML 파일에는 FlowLite 형식의 사양이 들어 있습니다.

그 HTML을 AI에게 전달하고,

이 HTML에 포함되어 있는 FlowLite 사양에 따라,
다음 내용을 FlowLite 형식의 관계도로 만들어 주세요.

라고 요청하면, AI가 FlowLite 형식으로 구조를 작성합니다.

즉, FlowLite의 역할은 다음과 같습니다.

인간: 자연어로 만들고 싶은 관계도를 설명한다
AI: FlowLite 형식으로 구조를 작성한다
FlowLite: 그 구조를 브라우저에서 움직일 수 있는 관계도로 만든다
...

그림을 처음부터 손으로 그리는 것이 아니라,

AI가 작성한 구조를 인간이 시각적으로 편집하기 위한 도구입니다.

AI가 출력한 관계도를 그대로 움직이기

FlowLite 형식은 대략 다음과 같은 모습입니다.

title: 드래곤볼 인물 관계도
direction: Focus
#nodes
...

이것은 단순한 도형 리스트가 아닙니다.

FlowLite에서는 구조를 크게 3가지로 나누고 있습니다.

대상
관계
속성

FlowLite 형식에서는 각각 다음과 같습니다.

대상 = 노드 (Node)
관계 = 에지 (Edge)
속성 = 태그 (Tag)

예를 들어,

Goku[손오공] +Saiyan +Hero
Vegeta[베지터] +Saiyan +Rival
Goku <-> Vegeta : 라이벌

라면,

손오공, 베지터 = 대상
라이벌 = 관계
Saiyan, Hero, Rival = 속성

입니다.

이처럼 FlowLite는 「겉모습의 그림」뿐만 아니라,

무엇과 무엇이 어떻게 관계하고 있는지를 평문으로 가집니다.

클릭하면 관계가 떠오릅니다

FlowLite에서 가장 보여주고 싶은 것은 클릭했을 때의 움직임입니다.

하나의 노드를 선택한 상태

노드를 클릭하면 해당 노드와 가까운 관계가 강조됩니다.

나아가, Ctrl / Cmd 클릭으로 여러 노드를 선택하면 관계의 문맥을 넓혀서 비교할 수 있습니다.

여러 노드를 선택하여 관계를 비교한다

이것은 단순히 그림을 바라보기 위한 것이 아닙니다.

관계도가 커지면 모든 선을 동시에 보는 것은 힘듭니다.

그래서 FlowLite에서는 다음과 같은 사용법을 의식하고 있습니다.

클릭한 노드 근처를 본다
여러 노드의 관계를 비교한다
중심이 되는 노드를 본다
...

브라우저에서 움직이고, 수정하기

AI가 만든 관계도는 대개 한 번에 완벽하지 않습니다.

관계가 부족할 수도 있습니다.

분류가 허술할 수도 있습니다.

배치가 보기 불편할 수도 있습니다.

하지만 그래도 괜찮다고 생각합니다.

FlowLite에서는 AI가 만든 구조를 브라우저에서 편집할 수 있습니다.

• 노드(Node)를 움직이기
• 노드(Node)를 추가하기
• 노드(Node)끼리 연결하기
• 에지(Edge)의 라벨 편집하기
• 노드(Node)나 에지(Edge) 삭제하기
• 색상 변경하기
• 모양 변경하기
• 태그로 분류하기
• 레이아웃 전환하기
• SVG로 저장하기
• HTML로 저장하기

AI가 만든 구조를, 인간이 움직여서 정리한다

AI가 초안을 만든다.

인간이 보고, 움직이고, 수정한다.

이 역할 분담이 FlowLite의 기본입니다.

사용 방법은 3단계

사용 방법은 매우 간단합니다.

1. FlowLite 열기

브라우저에서 FlowLite를 엽니다.

2. AI에게 FlowLite 형식으로 작성 요청하기

AI에게 FlowLite의 HTML을 전달하고, 만들고 싶은 관계도를 설명합니다.

예시입니다.

이 HTML에 포함된 FlowLite 사양에 따라,
다음 내용을 FlowLite 형식의 관계도로 만들어 주세요.
테마:
...

3. 출력을 붙여넣고 움직이기

AI가 출력한 FlowLite 형식의 텍스트를 FlowLite에 붙여넣습니다.

그러면 브라우저 상에서 움직일 수 있는 관계도가 됩니다.

제우스 중심의 관계도 예시

Mermaid나 draw.io와 무엇이 다른가

FlowLite는 Mermaid나 Graphviz, draw.io를 대체하는 것이 아닙니다.

각각 잘하는 분야가 다릅니다.

Mermaid는 Markdown 안에 도표를 넣는 데 강점이 있습니다.

Graphviz는 자동 레이아웃(Automatic Layout)에 강점이 있습니다.

draw.io는 인간이 직접 손으로 도표를 만드는 데 강점이 있습니다.

FlowLite가 목표로 하는 것은 조금 다릅니다.

AI가 관계 구조를 작성한다
↓
FlowLite가 움직일 수 있는 관계도로 표시한다
...

즉 FlowLite는,

AI의 출력과 인간의 시각적인 편집 사이에 위치하는 도구입니다.

어디에 사용할 수 있는가

관계가 중요한 것이라면 대부분 FlowLite의 대상이 됩니다.

예를 들어,

• 캐릭터 관계도
• 신화의 가계도
• 역사적 인물 관계
• 논문의 영향 관계
• 연구 테마 정리
• 소프트웨어 구성도
• 프로그램 처리 플로우 (Flow)
• 프로젝트 구조 맵
• 문서 구조 맵
• AI 에이전트용 지시 파일 정리
• 의사결정 맵
• 학습 맵
• 지식 맵

텍스트만으로는 보기 어려운 것을 관계도로 만져볼 수 있게 하는 것이 목적입니다.

예를 들어 FizzBuzz라면, 처리 플로우가 됩니다.

FizzBuzz의 처리 플로우 예시

그리스 신화라면, 혈연관계 맵이 됩니다.

관계의 종류도 가질 수 있다

FlowLite에서는 선(Line)에도 의미를 부여합니다.

A -> B A가 B에 작용한다 / 참조한다 / 흐른다
A => B A는 B에 속한다 / B의 일부이다
A == B A와 B는 동일·등가·별칭이다
...

예를 들어, 단순한 화살표뿐만 아니라,

소속
영향
동일성
...

와 같이 의미를 나눌 수 있습니다.

이를 통해 AI가 내놓는 구조도 조금 더 안정됩니다.

같은 구조를 다른 관점으로 보기

FlowLite에서는 동일한 관계 데이터를 몇 가지 레이아웃으로 볼 수 있습니다.

Flow
Cluster
Lane
...

예를 들어,

• 처리 흐름이라면 Flow
• 개념 정리라면 Cluster
• 태그별 분류라면 Lane
• 중심 노드를 보고 싶다면 Focus
• 밀집된 맵이라면 Compact

와 같이 구분해서 사용합니다.

같은 구조를 다른 레이아웃으로 보기

관계도는 배치만 바뀌어도 보이는 방식이 크게 달라집니다.

당신 자신도 구조화할 수 있다

재미있는 사용법으로, AI에게 파일을 건네며 이렇게 물어보세요.

"당신이 나라는 인간에 대해 알 수 있는 모든 것을 FlowLite 형식으로 출력해 주세요."

AI가 본 당신을 이미지화하는 것이 얼마 전 유행했는데, 그것의 구조화 버전입니다.

더 상세하게 인식할 수도 있고, AI에게 금지한 사항이 정말로 반영되어 있는지도 확인할 수 있습니다.

AI 프로젝트 관리에도 사용하고 싶다

여기서부터는 조금 앞선 이야기입니다.

FlowLite는 처음에는 관계도 에디터로서 만들었습니다.

하지만 만들다 보니, AI 코딩이나 AI 에이전트의 프로젝트 관리에도 사용할 수 있지 않을까 하는 생각이 들기 시작했습니다.

최근의 AI 코딩에서는 프로젝트 내에 다음과 같은 파일들이 늘어나고 있습니다.

AGENTS.md
CLAUDE.md
MISSION.md
...

이 파일들은 편리하지만, 개수가 늘어나면 관계를 파악하기 어려워집니다.

어떤 규칙이 어떤 태스크 (Task)에 영향을 미치고 있는지.

어떤 결정이 어떤 설계에 영향을 주었는지.

어떤 기억이 현재 작업과 관련이 있는지.

Markdown 목록만으로는 확인하기 어렵습니다.

그래서 이러한 프로젝트 구조도 FlowLite로 다룰 수 없을까 생각하고 있습니다.

AGENTS.md -> project.flowlite : 가장 먼저 읽음
project.flowlite -> RULES.md : 제약 사항을 참조함
project.flowlite -> TASKS.md : 작업 대상을 참조함
...

프로젝트를 '파일의 집합'으로 보는 것이 아니라,

'관계를 가진 구조'로 보는 것.

이 방향성은 FlowLite_Agent로서 실험하고 있습니다.

현재 상태

현재의 FlowLite는 대략 다음과 같은 상태입니다.

• 1파일 HTML
• 설치 불필요
• 브라우저만으로 동작
• FlowLite 사양을 HTML 내에 내장
• AI에게 전달하여 구조를 생성하기 쉬움
• 노드 (Node)・에지 (Edge)・태그 (Tag) 편집 가능
• 색상・모양・크기 변경 가능
• 다중 레이아웃 대응
• 관계 하이라이트 대응
• 분석 뷰 (Analysis View) 대응
• HTML 저장 대응
• SVG 저장 대응

아직 개인 개발 단계의 작은 도구입니다.

다만, AI가 만든 구조를 브라우저에서 만져볼 수 있는 도구로서는 상당히 흥미로운 사용감을 갖게 되었습니다.

요약

FlowLite는,

AI에게 관계도를 작성하게 한다
↓
FlowLite에 붙여넣는다
...

하기 위한, 1파일 HTML 도구입니다.

그림을 손으로 그리는 것이 아니라, AI에게 구조를 쓰게 한다.

단, AI에게 전적으로 맡기지는 않는다.

사람이 보고, 움직이고, 수정하고, 의미를 정돈한다.

그것을 위한 도구입니다.

GitHub:

Discussion