Create new file

app.py

@@ -0,0 +1,101 @@
+import streamlit as st
+import graphviz as graphviz
+import pandas as pd
+import numpy as np
+
+st.title('Graph Arrangement for Card Deck Organization of Classes Suits and Orders')
+
+
+
+st.graphviz_chart('''
+digraph G {
+	fontname="Helvetica,Arial,sans-serif"
+	node [fontname="Helvetica,Arial,sans-serif"]
+	edge [fontname="Helvetica,Arial,sans-serif"]
+	subgraph cluster_1 {
+		node [ style=filled,shape="box",fillcolor="antiquewhite:aquamarine" ]n5;
+		node [ shape="ellipse",fillcolor="bisque4:blue2" ]n4;
+		node [ shape="circle",fillcolor="cadetblue1:chocolate1" ]n3;
+		node [ shape="diamond",fillcolor="crimson:cyan4" ]n2;
+		node [ shape="triangle",fillcolor="deepskyblue2:firebrick" ]n1;
+		node [ shape="pentagon",fillcolor="gray24:gray88" ]n0;
+		label = "X11 Colors";
+	}
+	subgraph cluster_2 {
+		node [ style=filled,shape="box",fillcolor="bisque:brown" ]n11;
+		node [ shape="ellipse",fillcolor="green:darkorchid" ]n10;
+		node [ shape="circle",fillcolor="deepskyblue:gold" ]n9;
+		node [ shape="diamond",fillcolor="lightseagreen:orangered" ]n8;
+		node [ shape="triangle",fillcolor="turquoise:salmon" ]n7;
+		node [ shape="pentagon",fillcolor="snow:black" ]n6;
+		label = "SVG Colors";
+	}
+	subgraph cluster_3 {
+		node [ style=filled,shape="box",fillcolor="/accent3/1:/accent3/3" ]n17;
+		node [ shape="ellipse",fillcolor="/accent4/1:/accent4/4" ]n16;
+		node [ shape="circle",fillcolor="/accent5/1:/accent5/5" ]n15;
+		node [ shape="diamond",fillcolor="/accent6/1:/accent6/6" ]n14;
+		node [ shape="triangle",fillcolor="/accent7/1:/accent7/7" ]n13;
+		node [ shape="pentagon",fillcolor="/accent8/1:/accent8/8" ]n12;
+		label = "Brewer - accent";
+	}
+	subgraph cluster_4 {
+		node [ style=filled,shape="box",fillcolor="/blues3/1:/blues3/2" ]n23;
+		node [ shape="ellipse",fillcolor="/blues4/1:/blues4/3" ]n22;
+		node [ shape="circle",fillcolor="/blues5/1:/blues5/4" ]n21;
+		node [ shape="diamond",fillcolor="/blues6/1:/blues6/5" ]n20;
+		node [ shape="triangle",fillcolor="/blues7/1:/blues7/6" ]n19;
+		node [ shape="pentagon",fillcolor="/blues8/1:/blues8/7" ]n18;
+		label = "Brewer - blues";
+	}
+n3 -> n9 -> n15 -> n21;
+}
+''')
+
+st.graphviz_chart('''
+digraph G {bgcolor="#0000FF44:#FF000044" gradientangle=90
+	fontname="Helvetica,Arial,sans-serif"
+	node [fontname="Helvetica,Arial,sans-serif"]
+	edge [fontname="Helvetica,Arial,sans-serif"]
+	subgraph cluster_0 {
+		style=filled;
+		color=lightgrey;
+		fillcolor="darkgray:gold";
+		gradientangle=0
+		node [fillcolor="yellow:green" style=filled gradientangle=270] a0;
+		node [fillcolor="lightgreen:red"] a1;
+		node [fillcolor="lightskyblue:darkcyan"] a2;
+		node [fillcolor="cyan:lightslateblue"] a3;
+		a0 -> a1 -> a2 -> a3;
+		label = "process #1";
+	}
+	subgraph cluster_1 {
+		node [fillcolor="yellow:magenta" 
+			 style=filled gradientangle=270] b0;
+		node [fillcolor="violet:darkcyan"] b1;
+		node [fillcolor="peachpuff:red"] b2;
+		node [fillcolor="mediumpurple:purple"] b3;
+		b0 -> b1 -> b2 -> b3;
+		label = "process #2";
+		color=blue
+		fillcolor="darkgray:gold";
+		gradientangle=0
+		style=filled;
+	}
+	start -> a0;
+	start -> b0;
+	a1 -> b3;
+	b2 -> a3;
+	a3 -> a0;
+	a3 -> end;
+	b3 -> end;
+	start [shape=Mdiamond ,
+		fillcolor="pink:red",
+		gradientangle=90,
+		style=radial];
+	end [shape=Msquare,
+		fillcolor="lightyellow:orange",
+		style=radial,
+		gradientangle=90];
+}
+''')