# 문자열로 플로우차트 생성하기

> Clean Markdown view of GeekNews topic #3816. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=3816](https://news.hada.io/topic?id=3816)
- GeekNews Markdown: [https://news.hada.io/topic/3816.md](https://news.hada.io/topic/3816.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-03-02T09:31:40+09:00
- Updated: 2021-03-02T09:31:40+09:00
- Original source: [flowchart.fun](https://flowchart.fun/)
- Points: 16
- Comments: 1

## Topic Body

- 글자입력만으로 흐름도를 그리는 오픈소스 웹앱

ㅤ→ 한줄당 노드 하나

ㅤ→ 들여쓰기하면 차일드 노드

ㅤ→ ": " 로 연결 라인에 라벨 지정

ㅤ→ (1) 줄 번호로 다른 라인과 연결 가능

- 생성된 차트는 마우스로 위치 조정

- SVG로 다운로드 지원

- TypeScript + Cytoscape.js + React

## Comments



### Comment 4573

- Author: deadcat
- Created: 2021-03-03T14:52:57+09:00
- Points: 2

개인적인 추천으로는 vscode + mermaidJS 프리뷰가 좋은것 같습니다.

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

mermaidJS를 사용하면 깃랩/깃허브 마크다운에서 렌더링도 해줘서 리포지토리 웹에서도 쉽게 볼 수 있습니다.

https://mermaid-js.github.io/mermaid/#/

웹앱에서 간단히 그리기 위해서는 라이브 에디터가 있습니다.

https://mermaid-js.github.io/mermaid-live-editor/#/edit/