denisp1/GraphViz-Demo

1 2 3import time4import re5import pandas as pd6import numpy as np7import torch8import torch.nn.functional as F9import graphviz as graphviz10import pydeck as pdk11import streamlit as st12 13from transformers import AutoTokenizer, AutoModel14from tokenizers import Tokenizer, AddedToken15from st_click_detector import click_detector16 17# Define selection options and sort alphabetically18 19st.graphviz_chart(''' 20graph G {21  fontname="Helvetica,Arial,sans-serif"22  node [fontname="Helvetica,Arial,sans-serif"]23  edge [fontname="Helvetica,Arial,sans-serif"]24  layout=fdp25  e26  subgraph clusterA {27    a -- b;28    subgraph clusterC {29      C -- D;30    }31  }32  subgraph clusterB {33    d -- f34  }35  d -- D36  e -- clusterB37  clusterC -- clusterB38}39''')40 41st.graphviz_chart(''' 42graph Transparency {43	layout=neato44	start=11 // empiric value to set orientation45	bgcolor="#0000ff11"46	node [shape=circle width=2.22 label="" style=filled]47	5 [color="#0000ff80"]48	6 [color="#ee00ee80"]49	1 [color="#ff000080"]50	2 [color="#eeee0080"]51	3 [color="#00ff0080"]52	4 [color="#00eeee80"]53	1 -- 2 -- 3 -- 4 -- 5 -- 6 -- 154	}55''')56 57st.graphviz_chart('''58digraph UML_Class_diagram {59	fontname="Helvetica,Arial,sans-serif"60	node [fontname="Helvetica,Arial,sans-serif"]61	edge [fontname="Helvetica,Arial,sans-serif"]62	labelloc="t"63	label="UML Class diagram demo"64	graph [splines=false]65	node [shape=record style=filled fillcolor=gray95]66	edge [arrowhead=vee style=dashed]67	Client -> Interface1 [xlabel=dependency]68	Client -> Interface269	edge [dir=back arrowtail=empty style=""]70	Interface1 -> Class1 [xlabel=inheritance]71	Interface2 -> Class1 [dir=none]72	Interface2 [label="" xlabel="Simple\ninterface" shape=circle]73	Interface1[label = <{<b>«interface» I/O</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]74	Class1[label = <{<b>I/O class</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]75	edge [dir=back arrowtail=empty style=dashed]76	Class1 -> System_1 [xlabel=implementation]77	System_1 [label = <{<b>System</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]78	"Shared resource" [label = <{<b>Shared resource</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]79	edge [dir=back arrowtail=diamond]80	"System_1" -> Subsystem_1 [xlabel="composition"]81	Subsystem_1[label = <{<b>Subsystem 1</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]82	Subsystem_2[label = <{<b>Subsystem 2</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]83	Subsystem_3[label = <{<b>Subsystem 3</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]84	"System_1" -> Subsystem_285	"System_1" -> Subsystem_386	edge [xdir=back arrowtail=odiamond]87	Subsystem_1 -> "Shared resource" [xlabel=aggregation]88	{Subsystem_2 Subsystem_3 } -> "Shared resource"89}90''')91 92 93 94st.graphviz_chart('''95digraph G {96	fontname="Helvetica,Arial,sans-serif"97	node [fontname="Helvetica,Arial,sans-serif"]98	edge [fontname="Helvetica,Arial,sans-serif"]99	subgraph cluster_1 {100		node [ style=filled,shape="box",fillcolor="antiquewhite:aquamarine" ]n5;101		node [ shape="ellipse",fillcolor="bisque4:blue2" ]n4;102		node [ shape="circle",fillcolor="cadetblue1:chocolate1" ]n3;103		node [ shape="diamond",fillcolor="crimson:cyan4" ]n2;104		node [ shape="triangle",fillcolor="deepskyblue2:firebrick" ]n1;105		node [ shape="pentagon",fillcolor="gray24:gray88" ]n0;106		label = "X11 Colors";107	}108	subgraph cluster_2 {109		node [ style=filled,shape="box",fillcolor="bisque:brown" ]n11;110		node [ shape="ellipse",fillcolor="green:darkorchid" ]n10;111		node [ shape="circle",fillcolor="deepskyblue:gold" ]n9;112		node [ shape="diamond",fillcolor="lightseagreen:orangered" ]n8;113		node [ shape="triangle",fillcolor="turquoise:salmon" ]n7;114		node [ shape="pentagon",fillcolor="snow:black" ]n6;115		label = "SVG Colors";116	}117	subgraph cluster_3 {118		node [ style=filled,shape="box",fillcolor="/accent3/1:/accent3/3" ]n17;119		node [ shape="ellipse",fillcolor="/accent4/1:/accent4/4" ]n16;120		node [ shape="circle",fillcolor="/accent5/1:/accent5/5" ]n15;121		node [ shape="diamond",fillcolor="/accent6/1:/accent6/6" ]n14;122		node [ shape="triangle",fillcolor="/accent7/1:/accent7/7" ]n13;123		node [ shape="pentagon",fillcolor="/accent8/1:/accent8/8" ]n12;124		label = "Brewer - accent";125	}126	subgraph cluster_4 {127		node [ style=filled,shape="box",fillcolor="/blues3/1:/blues3/2" ]n23;128		node [ shape="ellipse",fillcolor="/blues4/1:/blues4/3" ]n22;129		node [ shape="circle",fillcolor="/blues5/1:/blues5/4" ]n21;130		node [ shape="diamond",fillcolor="/blues6/1:/blues6/5" ]n20;131		node [ shape="triangle",fillcolor="/blues7/1:/blues7/6" ]n19;132		node [ shape="pentagon",fillcolor="/blues8/1:/blues8/7" ]n18;133		label = "Brewer - blues";134	}135n3 -> n9 -> n15 -> n21;136}137''')138 139st.graphviz_chart('''140digraph G {bgcolor="#0000FF44:#FF000044" gradientangle=90141	fontname="Helvetica,Arial,sans-serif"142	node [fontname="Helvetica,Arial,sans-serif"]143	edge [fontname="Helvetica,Arial,sans-serif"]144	subgraph cluster_0 {145		style=filled;146		color=lightgrey;147		fillcolor="darkgray:gold";148		gradientangle=0149		node [fillcolor="yellow:green" style=filled gradientangle=270] a0;150		node [fillcolor="lightgreen:red"] a1;151		node [fillcolor="lightskyblue:darkcyan"] a2;152		node [fillcolor="cyan:lightslateblue"] a3;153		a0 -> a1 -> a2 -> a3;154		label = "process #1";155	}156	subgraph cluster_1 {157		node [fillcolor="yellow:magenta" 158			 style=filled gradientangle=270] b0;159		node [fillcolor="violet:darkcyan"] b1;160		node [fillcolor="peachpuff:red"] b2;161		node [fillcolor="mediumpurple:purple"] b3;162		b0 -> b1 -> b2 -> b3;163		label = "process #2";164		color=blue165		fillcolor="darkgray:gold";166		gradientangle=0167		style=filled;168	}169	start -> a0;170	start -> b0;171	a1 -> b3;172	b2 -> a3;173	a3 -> a0;174	a3 -> end;175	b3 -> end;176	start [shape=Mdiamond ,177		fillcolor="pink:red",178		gradientangle=90,179		style=radial];180	end [shape=Msquare,181		fillcolor="lightyellow:orange",182		style=radial,183		gradientangle=90];184}185''')186 187st.graphviz_chart('''188graph Color_wheel {189	graph [190		layout = neato191		label = "Color wheel, 33 colors.\nNeato layout"192		labelloc = b193		fontname = "Helvetica,Arial,sans-serif"194		start = regular195		normalize = 0196	]197	node [198		shape = circle199		style = filled200		color = "#00000088"201		fontname = "Helvetica,Arial,sans-serif"202	]203	edge [204		len = 2.7205		color = "#00000088"206		fontname = "Helvetica,Arial,sans-serif"207	]208	subgraph Dark {209		node [fontcolor = white width = 1.4]210		center [width = 1 style = invis shape = point]211		center -- darkred [label = "0°/360°"]212		darkred [fillcolor = darkred]213		brown [fillcolor = brown]214		brown -- center [label = "30°"]215		olive [fillcolor = olive]216		olive -- center [label = "60°"]217		darkolivegreen [fillcolor = darkolivegreen fontsize = 10]218		darkolivegreen -- center [label = "90°"]219		darkgreen [fillcolor = darkgreen]220		darkgreen -- center [label = "120°"]221		"dark hue 0.416" [color = ".416 1 .6" fontcolor = white]222		"dark hue 0.416" -- center [label = "150°"]223		darkcyan [fillcolor = darkcyan]224		darkcyan -- center [label = "180°"]225		"dark hue 0.583" [color = ".583 1 .6" fontcolor = white]226		"dark hue 0.583" -- center [label = "210°"]227		darkblue [fillcolor = darkblue]228		darkblue -- center [label = "240°"]229		"dark hue 0.750" [color = ".750 1 .6"]230		"dark hue 0.750" -- center [label = "270°"]231		darkmagenta [fillcolor = darkmagenta]232		darkmagenta -- center [label = "300°"]233		"dark hue 0.916" [color = ".916 1 .6"]234		"dark hue 0.916" -- center [label = "330°"]235	}236	subgraph Tue {237		node [width = 1.3]238		"hue 0.083" -- brown239		"hue 0.083" [color = ".083 1 1"]240		"hue 0.125" [color = ".125 1 1"]241		"hue 0.166" -- olive242		"hue 0.166" [color = ".166 1 1"]243		"hue 0.208" [color = ".208 1 1"]244		"hue 0.250" -- darkolivegreen245		"hue 0.250" [color = ".250 1 1"]246		"hue 0.291" [color = ".291 1 1"]247		"hue 0.333" -- darkgreen248		"hue 0.333" [color = ".333 1 1"]249		"hue 0.375" [color = ".375 1 1"]250		"hue 0.416" -- "dark hue 0.416"251		"hue 0.416" [color = ".416 1 1"]252		"hue 0.458" [color = ".458 1 1"]253		"hue 0.500" -- darkcyan254		"hue 0.500" [color = ".500 1 1"]255		"hue 0.541" [color = ".541 1 1"]256		node [fontcolor = white]257		"hue 0.000" [color = ".000 1 1"]258		"hue 0.000" -- darkred259		"hue 0.041" [color = ".041 1 1"]260		"hue 0.583" -- "dark hue 0.583"261		"hue 0.583" [color = ".583 1 1"]262		"hue 0.625" [color = ".625 1 1"]263		"hue 0.666" -- darkblue264		"hue 0.666" [color = ".666 1 1"]265		"hue 0.708" [color = ".708 1 1"]266		"hue 0.750" -- "dark hue 0.750"267		"hue 0.750" [color = ".750 1 1"]268		"hue 0.791" [color = ".791 1 1"]269		"hue 0.833" -- darkmagenta270		"hue 0.833" [color = ".833 1 1"]271		"hue 0.875" [color = ".875 1 1"]272		"hue 0.916" -- "dark hue 0.916"273		"hue 0.916" [color = ".916 1 1"]274		"hue 0.958" [color = ".958 1 1"]275		edge [len = 1]276		"hue 0.000" -- "hue 0.041" -- "hue 0.083" -- "hue 0.125" -- "hue 0.166" -- "hue 0.208"277		"hue 0.208" -- "hue 0.250" -- "hue 0.291" -- "hue 0.333" -- "hue 0.375" -- "hue 0.416"278		"hue 0.416" -- "hue 0.458" -- "hue 0.500" --"hue 0.541" -- "hue 0.583" -- "hue 0.625"279		"hue 0.625" -- "hue 0.666" -- "hue 0.708" -- "hue 0.750" -- "hue 0.791" -- "hue 0.833"280		"hue 0.833" -- "hue 0.875" -- "hue 0.916" -- "hue 0.958" -- "hue 0.000"281	}282	subgraph Main_colors {283		node [width = 2 fontsize = 20]284		red [fillcolor = red fontcolor = white]285		orangered [fillcolor = orangered]286		orange [fillcolor = orange]287		gold [fillcolor = gold]288		yellow [fillcolor = yellow]289		yellowgreen [fillcolor = yellowgreen]290		deeppink [fillcolor = deeppink fontcolor = white]291		fuchsia [label = "fuchsia\nmagenta" fillcolor = fuchsia fontcolor = white]292		purple [fillcolor = purple fontcolor = white]293		blue [fillcolor = blue fontcolor = white]294		cornflowerblue [fillcolor = cornflowerblue]295		deepskyblue [fillcolor = deepskyblue]296		aqua [fillcolor = aqua label = "aqua\ncyan"]297		springgreen [fillcolor = springgreen]298		green [fillcolor = green]299		purple -- fuchsia -- deeppink -- red300		cornflowerblue -- blue -- purple301		cornflowerblue -- deepskyblue -- aqua [len = 1.7]302		aqua -- springgreen -- green -- yellowgreen -- yellow303		yellow -- gold -- orange -- orangered -- red [len = 1.6]304		orange -- "hue 0.083"305		deeppink -- "hue 0.916"306		deeppink -- "hue 0.875"307		red -- "hue 0.000"308		yellowgreen -- "hue 0.250"309		blue -- "hue 0.666"310		yellow -- "hue 0.166"311		gold -- "hue 0.125"312		green -- "hue 0.333"313		springgreen -- "hue 0.416"314		aqua -- "hue 0.500"315		cornflowerblue -- "hue 0.583"316		deepskyblue -- "hue 0.541"317		purple -- "hue 0.791"318		purple -- "hue 0.750"319		fuchsia -- "hue 0.833"320	}321	subgraph Light_colors {322		node [width = 2 fontsize = 20]323		node [shape = circle width = 1.8]324		edge [len = 2.1]325		pink [fillcolor = pink]326		pink -- red327		lightyellow [fillcolor = lightyellow]328		lightyellow -- yellow329		mediumpurple [fillcolor = mediumpurple]330		mediumpurple -- purple331		violet [fillcolor = violet]332		violet -- fuchsia333		hotpink [fillcolor = hotpink]334		hotpink -- deeppink335		"light hue 0.250" [color = ".250 .2 1"]336		"light hue 0.250" -- yellowgreen337		lightcyan [fillcolor = lightcyan]338		lightcyan -- aqua339		lightslateblue [fillcolor = lightslateblue]340		lightslateblue -- blue341		lightgreen [fillcolor = lightgreen]342		lightgreen -- green343		lightskyblue [fillcolor = lightskyblue]344		lightskyblue -- deepskyblue345		peachpuff [fillcolor = peachpuff]346		peachpuff -- orange347		"light hue 0.416" [color = ".416 .2 1"]348		"light hue 0.416" -- springgreen349	}350	subgraph Tints {351		node [width = 1]352		edge [len = 2.4]353		"hue 0 tint" -- pink354		"hue 0 tint" [color = "0 .1 1"]355		"hue 0.041 tint" [color = ".041 .1 1"]356		"hue 0.083 tint" -- peachpuff357		"hue 0.083 tint" [color = ".083 .1 1"]358		"hue 0.125 tint" [color = ".125 .1 1"]359		"hue 0.166 tint" -- lightyellow360		"hue 0.166 tint" [color = ".166 .1 1"]361		"hue 0.208 tint" [color = ".208 .1 1"]362		"hue 0.250 tint" -- "light hue 0.250"363		"hue 0.250 tint" [color = ".250 .1 1"]364		"hue 0.291 tint" [color = ".291 .1 1"]365		"hue 0.333 tint" -- lightgreen366		"hue 0.333 tint" [color = ".333 .1 1"]367		"hue 0.375 tint" [color = ".375 .1 1"]368		"hue 0.416 tint" -- "light hue 0.416"369		"hue 0.416 tint" [color = ".416 .1 1"]370		"hue 0.458 tint" [color = ".458 .1 1"]371		"hue 0.5 tint" -- lightcyan372		"hue 0.5 tint" [color = ".5 .1 1"]373		"hue 0.541 tint" -- lightskyblue374		"hue 0.541 tint" [color = ".541 .1 1"]375		"hue 0.583 tint" [color = ".583 .1 1"]376		"hue 0.625 tint" [color = ".625 .1 1"]377		"hue 0.666 tint" -- lightslateblue378		"hue 0.666 tint" [color = ".666 .1 1"]379		"hue 0.708 tint" [color = ".708 .1 1"]380		"hue 0.750 tint" -- mediumpurple381		"hue 0.750 tint" [color = ".750 .1 1"]382		"hue 0.791 tint" [color = ".791 .1 1"]383		"hue 0.833 tint" -- violet384		"hue 0.833 tint" [color = ".833 .1 1"]385		"hue 0.875 tint" [color = ".875 .1 1"]386		"hue 0.916 tint" -- hotpink387		"hue 0.916 tint" [color = ".916 .1 1"]388		"hue 0.958 tint" [color = ".958 .1 1"]389		edge [len = 2]390		"hue 0 tint" -- "hue 0.041 tint" -- "hue 0.083 tint" -- "hue 0.125 tint" -- "hue 0.166 tint" -- "hue 0.208 tint"391		"hue 0.208 tint" -- "hue 0.250 tint" -- "hue 0.291 tint" -- "hue 0.333 tint" -- "hue 0.375 tint" -- "hue 0.416 tint"392		"hue 0.416 tint" -- "hue 0.458 tint" -- "hue 0.5 tint" --"hue 0.541 tint" -- "hue 0.583 tint" -- "hue 0.625 tint"393		"hue 0.625 tint" -- "hue 0.666 tint" -- "hue 0.708 tint" -- "hue 0.750 tint" -- "hue 0.791 tint" -- "hue 0.833 tint"394		"hue 0.833 tint" -- "hue 0.875 tint" -- "hue 0.916 tint" -- "hue 0.958 tint" -- "hue 0 tint"395	}396	}397''')