Update `README` and `ROADMAP` and add `ECOSYSTEM`

16 files changed, 239 insertions, 12 deletions

diff --git a/docs/crates_graph.dot b/docs/crates_graph.dot
deleted file mode 100644
index 85e375d0..00000000
--- a/docs/crates_graph.dot
+++ /dev/null
@@ -1,12 +0,0 @@
-digraph G {
-  "iced_core" -> "iced_native"
-  "iced_core" -> "iced_web"
-  "iced_native" -> "iced_wgpu"
-  "iced_native" -> "iced_winit"
-  "iced_web" -> "iced"
-  "iced_wgpu" -> "iced"
-  "iced_winit" -> "iced"
-
-  node[shape=box];
-  "iced" -> "cross-platform application"
-}
diff --git a/docs/crates_graph.png b/docs/crates_graph.png
deleted file mode 100644
index d598c1dd..00000000
--- a/docs/crates_graph.png
+++ /dev/null
diff --git a/docs/graphs/core.dot b/docs/graphs/core.dot
new file mode 100644
index 00000000..a52dfbb9
--- /dev/null
+++ b/docs/graphs/core.dot
@@ -0,0 +1,13 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  { rank = same; iced_native iced_web }
+
+  iced_core -> iced_native [style=dashed];
+  iced_core -> iced_web [style=dashed];
+
+  iced_core [style=dashed, fontcolor=black];
+
+}
diff --git a/docs/graphs/core.png b/docs/graphs/core.png
new file mode 100644
index 00000000..a5002c9b
--- /dev/null
+++ b/docs/graphs/core.png
diff --git a/docs/graphs/ecosystem.dot b/docs/graphs/ecosystem.dot
new file mode 100644
index 00000000..e6c1af94
--- /dev/null
+++ b/docs/graphs/ecosystem.dot
@@ -0,0 +1,59 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  subgraph cluster_1 {
+    label = "renderers  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_1 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_wgpu;
+  }
+
+  subgraph cluster_2 {
+    label = "shells  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_2 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_winit;
+  }
+
+  subgraph cluster_3 {
+    style=invis;
+    margin=20;
+    iced;
+  }
+
+  { rank = same; iced_native iced_web }
+  { rank = same; iced_wgpu iced_winit etc_1 etc_2 }
+
+  iced_core -> iced_native [style=dashed];
+  iced_core -> iced_web [style=dashed];
+  iced_native -> iced_wgpu;
+  iced_native -> iced_winit;
+
+  iced_winit -> iced;
+  iced_wgpu -> iced;
+  iced_web -> iced;
+
+  iced -> "cross-platform application";
+
+  iced_core [style=dashed, fontcolor=black];
+  iced [width=1, height=0.6, style="filled", fontcolor=white, color="#474973"];
+
+
+  "cross-platform application" [shape=box3d, style="solid", width=2.8, height=0.6, fontcolor="#474973"];
+}
diff --git a/docs/graphs/ecosystem.png b/docs/graphs/ecosystem.png
new file mode 100644
index 00000000..647c22ab
--- /dev/null
+++ b/docs/graphs/ecosystem.png
diff --git a/docs/graphs/iced.dot b/docs/graphs/iced.dot
new file mode 100644
index 00000000..c049bf95
--- /dev/null
+++ b/docs/graphs/iced.dot
@@ -0,0 +1,47 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  subgraph cluster_1 {
+    label = "renderers  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_1 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_wgpu;
+  }
+
+  subgraph cluster_2 {
+    label = "shells  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_2 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_winit;
+  }
+
+  subgraph cluster_3 {
+    style=invis;
+    margin=20;
+    iced;
+  }
+
+  { rank = same; iced_wgpu iced_winit etc_1 etc_2 }
+
+  iced_winit -> iced;
+  iced_wgpu -> iced;
+  iced_web -> iced;
+
+  iced [width=1, height=0.6, style="filled", fontcolor=white, color="#474973"];
+}
diff --git a/docs/graphs/iced.png b/docs/graphs/iced.png
new file mode 100644
index 00000000..dcdd9cd3
--- /dev/null
+++ b/docs/graphs/iced.png
diff --git a/docs/graphs/native.dot b/docs/graphs/native.dot
new file mode 100644
index 00000000..3bc654a5
--- /dev/null
+++ b/docs/graphs/native.dot
@@ -0,0 +1,42 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  subgraph cluster_1 {
+    label = "renderers  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_1 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_wgpu;
+  }
+
+  subgraph cluster_2 {
+    label = "shells  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_2 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_winit;
+  }
+
+
+  { rank = same; iced_wgpu iced_winit etc_1 etc_2 }
+
+  iced_core -> iced_native [style=dashed];
+  iced_native -> iced_wgpu;
+  iced_native -> iced_winit;
+
+  iced_core [style=dashed, fontcolor=black];
+}
diff --git a/docs/graphs/native.png b/docs/graphs/native.png
new file mode 100644
index 00000000..fbcad808
--- /dev/null
+++ b/docs/graphs/native.png
diff --git a/docs/graphs/web.dot b/docs/graphs/web.dot
new file mode 100644
index 00000000..06c05176
--- /dev/null
+++ b/docs/graphs/web.dot
@@ -0,0 +1,12 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  iced_core -> iced_web [style=dashed];
+
+  iced_web -> iced;
+
+  iced_core [style=dashed, fontcolor=black];
+  iced [width=1, height=0.6, style="filled", fontcolor=white, color="#474973"];
+}
diff --git a/docs/graphs/web.png b/docs/graphs/web.png
new file mode 100644
index 00000000..6db04087
--- /dev/null
+++ b/docs/graphs/web.png
diff --git a/docs/graphs/wgpu.dot b/docs/graphs/wgpu.dot
new file mode 100644
index 00000000..dc2d7cc8
--- /dev/null
+++ b/docs/graphs/wgpu.dot
@@ -0,0 +1,33 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  subgraph cluster_1 {
+    label = "renderers  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_1 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_wgpu;
+  }
+
+  subgraph cluster_3 {
+    style=invis;
+    margin=20;
+    iced;
+  }
+
+  { rank = same; iced_wgpu etc_1  }
+
+  iced_native -> iced_wgpu;
+
+  iced_wgpu -> iced;
+
+  iced [width=1, height=0.6, style="filled", fontcolor=white, color="#474973"];
+}
diff --git a/docs/graphs/wgpu.png b/docs/graphs/wgpu.png
new file mode 100644
index 00000000..00ae76ce
--- /dev/null
+++ b/docs/graphs/wgpu.png
diff --git a/docs/graphs/winit.dot b/docs/graphs/winit.dot
new file mode 100644
index 00000000..c31f869b
--- /dev/null
+++ b/docs/graphs/winit.dot
@@ -0,0 +1,33 @@
+digraph G {
+  fontname = "Roboto";
+  newrank=true;
+  node[fontname = "Roboto", style=filled, fontcolor=white, color="#474973"];
+
+  subgraph cluster_2 {
+    label = "shells  ";
+    labelloc = "b";
+    labeljust = "r";
+    fontcolor = "#ffffff";
+    color="#8797AF";
+    bgcolor="#8797AF";
+    style=rounded;
+    node [fillcolor=white, color=white, fontcolor=black];
+
+    etc_2 [label="...", style=empty, shape=none, fontcolor=white];
+    iced_winit;
+  }
+
+  subgraph cluster_3 {
+    style=invis;
+    margin=20;
+    iced;
+  }
+
+  { rank = same; iced_winit  etc_2 }
+
+  iced_native -> iced_winit;
+
+  iced_winit -> iced;
+
+  iced [width=1, height=0.6, style="filled", fontcolor=white, color="#474973"];
+}
diff --git a/docs/graphs/winit.png b/docs/graphs/winit.png
new file mode 100644
index 00000000..ef8b98dc
--- /dev/null
+++ b/docs/graphs/winit.png