예전에 연재한 post의 한대목인 플로우 차트 하나를 정해 최대한 비슷하게 표현하는 실험을 해보았습니다. 아직은 더 알아야 것들이 많지만 최대한 쉽게 코딩을 해보도록 노력했네요.
실험을 하기 전 사전 공부를 해야 하는 부분만 간단히 살펴 봅시다.
위 내용들은 한번 읽어보면 좋지만 사용할 부분만 몇개 보도록 하죠.
아래와 같이 node 모양이 다양하게 제공됩니다.
차트를 만들 때 위 모양을 보시고 원하는 걸 선택하시면 됩니다.
node의 선에 관련 된 스타일을 설정할 수 있습니다.
Color는 다양하게 표현이 가능합니다.
전 단지 Red, Blue, Yellow 색상만 사용했네요.
기본 3가지 내용만 간단히 기초적인 것만 살펴본 뒤에 실험을 해보았습니다.
실험의 주제는 예전에 아두이노 코딩에서 For문에 대한 이론 공부를 하기 위한 예제의 소스입니다. For문이 어떻게 돌아가는지에 대한 설명을 하기 위해 최대한 단순하게 A[i]값을 시리얼모니터로 출력하는 코딩입니다.
[예제]
for(int i=0;i<6;i++){
Serial.println(A[i]);
}
그때, 플로우 차트를 파워포인터로 만들어서 이미지를 떴는데 아래와 같습니다.
start [shape=Mdiamond color="blue"];
start 노드에 모양은 Mdiamond이고 Color은 blue이다라고 설정했는데 좀 더 기교를 넣고 싶다면 여기에 계속 추가하시면 됩니다.
edge [color="blue"];
이렇게 하면 모든 선을 blue로 바꿔 버립니다. 특정 선에 색을 지정하고 싶다면 다음과 같이 노드와 노드을 연결 코딩하고 그 안에 color색을 지정하면 개별적으로 노드 연결선에 색을 지정할 수 있습니다.
node2 -> end[color = "red" ];
각 node에 label로 해단 순서도로 표현한 각 문자열을 집어 넣고 표현하면 차트를 만들 수 있는데 한번 만들어 봤습니다.
[코딩]
digraph G {
start [shape=Mdiamond color="blue"];
end [shape=Msquare color="blue"];
node1 [shape=rect label="int i=0;"];
node2 [shape=diamond style=filled label="i<6"];
node3 [shape=rect label="Serial.println(A[i]);"];
node4 [shape=rect label="i++;"];
edge [color="blue"];
start -> node1 -> node2;
node2 -> node3[fontcolor="blue" label="True"];
node3 -> node4;
node4 -> node2;
node2 -> end[color = "red" fontcolor="red" label ="False"];
}
위 코딩을 보면 여러줄로 복잡해 보일 수 있는데 진짜 단순합니다. 중복되는 코딩이 대부분이고 label 부분과 노드 "->" 표시한 부분만 이해하시면 나머진 스타일 설정이라서 복잡하게 느낄 필요가 없습니다.
[결과]
결과를 보시면 아직 걸음마 단계라 원하는 이미지로 만들어 내지 못했지만 그래도 완성이 되었네요.
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
[코딩틀]
<body>
<div id="graph" style="text-align: center;"></div>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
<script>
d3.select("#graph")
.graphviz()
.renderDot('코딩삽입부분');
</script>
</body>
위 코딩 틀에서 코딩삽입부분이 있는데 이 부분을 방금전 grphviz 실험한 코딩을 삽입하시면 됩니다. 어렵지 않죠.
[전체소스]
<body>
<div id="graph" style="text-align: center;"></div>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
<script>
d3.select("#graph")
.graphviz()
.renderDot('digraph G { start [shape=Mdiamond color="blue"]; end [shape=Msquare color="blue"]; node1 [shape=rect label="int i=0;"]; node2 [shape=diamond style=filled label="i node1 -> node2; node2 -> node3[fontcolor="blue" label="True"]; node3 -> node4; node4 -> node2; node2 -> end[color = "red" fontcolor="red" label ="False"];}');
</script>
</body>
[결과]
이렇게 해서 웹페이지로 차트를 바로 만들어서 출력을 할 수 있게 되었습니다.
이렇게 웹페이지에 다른 문서 편집기에서 작업해서 이미지로 만들어서 웹페이지에 이미지로 올릴 수도 있지만 코딩으로 아예 차트형태로 만들어서 올릴 수도 있어서 활용도는 무궁무진 합니다. 뭔가 완벽하게 차트를 만들어서 실전 활용도를 보여드렸으면 좋았을텐데 차트가 영 마음에 안들게 만들어 졌네요. 아직은 기초 단계라 표현의 한계가 있네요.