diff --git a/Gemfile b/Gemfile
index 33d9d3b3..c6438fe0 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,3 +1,6 @@
 source "https://rubygems.org"
 
-gem 'github-pages', group: :jekyll_plugins
+group :jekyll_plugins do
+  gem "github-pages"
+  gem "jekyll-mermaid"
+end
diff --git a/_config.yml b/_config.yml
index e7a0a828..b7ed3eae 100644
--- a/_config.yml
+++ b/_config.yml
@@ -149,3 +149,8 @@ pages_dir: ""
 url: http://chaoss/github.io/grimoirelab-tutorial
 # Resource name in the url
 baseurl: '/grimoirelab-tutorial'
+
+# Location of the mermaid source Javascript file, as expected by
+# the jekyll-mermaid gem. It can also be a local file.
+mermaid:
+  src: 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js'
diff --git a/basics/components.md b/basics/components.md
index 826e85b2..b898ceb6 100644
--- a/basics/components.md
+++ b/basics/components.md
@@ -21,9 +21,46 @@ The main components of GrimoireLab are:
 * Manuscripts. Production of PDF documents reporting on the main characteristics of a project.
 * Mordred. Manages the configuration of all the components needed to produce a dashboard, automating its production.
 
-![](figs/grimoirelab-all-complete.png)
+{% mermaid %}
+graph LR
+    A((Perceval)) --> B((Arthur))
+    B --> C(Redis<br/>fa:fa-database Item batches)
+    C --> D((GrimoireELK))
+    D--> E((SortingHat))
+    D--> F(ElasticSearch<br/>fa:fa-database Raw indexes)
+    E --> D
+    F --> D
+    E --> G(MariaDB <br/>fa:fa-database Identities, affiliations)
+    G --> E
+    H[fa:fa-file-code Known Ids] --> E
+    D --> I(ElasticSearch<br/>fa:fa-database Enriched indexes)
+    I --> J((Reports))
+    I --> K((Kibiter))
+    L((Panels)) --> K
+    J--> M[Report]
+    J--> N[Report n]
+    K--> O[Browser]
+    K--> P[Browser n]
+    Q[fa:fa-file-code Project config] --> R((Mordred))
+    S[Datat source] -->A
+    T[Datat source n] -->A
 
-In the figure above, GrimoireLab components are represented in the pale green box. Bold arrows show the main data flow: from data sources to Perceval (which retrieves them), to Arthur (which schedules retrieval batches and stores results in Redis), to GrimoireELK (which stores retrieved items as raw indexes, and then uses them to produce enriched indexes, both in ElasticSearch), to Reports (to produce specialized reports) or Kibiter (to visualize in actionable dashboards).
+classDef grimoirelab fill:lightgreen,stroke:green,stroke-width:2px;
+classDef configfile fill:lightsalmon,stroke:coral,stroke-width:4px;
+classDef output fill:gold,stroke:goldenrod,stroke-width:2px;
+classDef database fill:orchid,stroke:darkmagenta,stroke-width:3px;
+classDef datasource fill:#ff6666,stroke:maroon,stroke-width:2px;
+
+class A,B,D,E,J,K,L,R grimoirelab
+class H,Q configfile
+class M,N,O,P output
+class C,I,F,G database
+class S,T datasource
+
+
+{% endmermaid %}
+
+In the figure above, GrimoireLab components are represented in green. Bold arrows show the main data flow: from data sources to Perceval (which retrieves them), to Arthur (which schedules retrieval batches and stores results in Redis), to GrimoireELK (which stores retrieved items as raw indexes, and then uses them to produce enriched indexes, both in ElasticSearch), to Reports (to produce specialized reports) or Kibiter (to visualize in actionable dashboards).
 
 GrimoireELK uses SortingHat to store all the identities it finds in a MariaDB database. SortingHat uses lists of known identifiers (usually maintained in configuration files) and heuristics to merge identities corresponding to the same person, and related information (such as affiliation).
 
diff --git a/basics/figs/grimoirelab-all-complete.png b/basics/figs/grimoirelab-all-complete.png
deleted file mode 100644
index 99c2965d..00000000
Binary files a/basics/figs/grimoirelab-all-complete.png and /dev/null differ