diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 61865216d..f1fd66d4e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -175,13 +175,6 @@ Insert cloud-specific markdown content here.
{{% /cloud %}}
```
-#### All content is cloud-specific
-If all content in an article is cloud-specific, include `cloud` in the `products` frontmatter.
-
-```yaml
-products: [cloud]
-```
-
#### InfluxDB Cloud name
The name used to refer to InfluxData's cloud offering is subject to change.
To facilitate easy updates in the future, use the `cloud-name` short-code when
@@ -206,13 +199,6 @@ InfluxDB Cloud.
Find more info [here][{{< cloud-link >}}]
```
-### InfluxDB OSS Content
-If all content in an article is OSS-specific, include `oss` in the `products` frontmatter.
-
-```yaml
-products: [oss]
-```
-
### Latest links
Each of the InfluxData projects have different "latest" versions.
Use the `{{< latest >}}` shortcode to populate link paths with the latest version
@@ -384,6 +370,20 @@ The following parameters are available:
{{< keybind mac="⇧⌘P" linux="Ctrl+Shift+P" win="Ctrl+Shift+Alt+P" >}}
```
+### Diagrams
+Use the `{{< diagram >}}` shortcode to dynamically build diagrams.
+The shortcode uses [mermaid.js](https://github.com/mermaid-js/mermaid) to convert
+simple text into SVG diagrams.
+For information about the syntax, see the [mermaid.js documentation](https://mermaid-js.github.io/mermaid/#/).
+
+```md
+{{< diagram >}}
+flowchart TB
+ This --> That
+ That --> There
+{{< /diagram >}}
+```
+
### Related content
Use the `related` frontmatter to include links to specific articles at the bottom of an article.
diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss
index 3e81e09c5..5dd3eaa48 100644
--- a/assets/styles/layouts/_article.scss
+++ b/assets/styles/layouts/_article.scss
@@ -102,6 +102,7 @@
"article/children",
"article/code",
"article/cloud",
+ "article/diagrams",
"article/enterprise",
"article/expand",
"article/feedback",
diff --git a/assets/styles/layouts/article/_diagrams.scss b/assets/styles/layouts/article/_diagrams.scss
new file mode 100644
index 000000000..d2201ad74
--- /dev/null
+++ b/assets/styles/layouts/article/_diagrams.scss
@@ -0,0 +1,44 @@
+.mermaid {
+ opacity: 0;
+ color: $article-bg;
+ margin: 3rem 0;
+ transition: opacity .5s;
+
+
+ .arrowheadPath, .arrowMarkerPath { fill: $diagram-arrow !important; }
+ .edgePath .path, .flowchart-link { stroke: $diagram-arrow !important; }
+ .label { color: $article-text !important; }
+ .cluster-label .nodeLabel {
+ color: $article-code !important;
+ }
+ .edgeLabel {
+ color: $article-text !important;
+ background: $article-code-bg !important;
+ font-size: .85em;
+ font-weight: $medium;
+ }
+
+ .node {
+ rect,
+ circle,
+ ellipse,
+ polygon,
+ path {
+ fill: $article-bg !important;
+ stroke: $diagram-arrow !important;
+ stroke-width: 2px !important;
+ }
+ .label { color: $article-text !important; }
+ }
+
+ .cluster {
+ rect,
+ circle,
+ ellipse,
+ polygon,
+ path {
+ fill: $article-code-bg !important;
+ stroke: none !important;
+ }
+ }
+}
diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss
index 1b61b492b..2bdaabcbc 100644
--- a/assets/styles/themes/_theme-dark.scss
+++ b/assets/styles/themes/_theme-dark.scss
@@ -209,6 +209,9 @@ $svg-geo-s2-cell: $b-dodger;
$svg-geo-region: $p-comet;
$svg-geo-point: $br-chartreuse;
+// Diagram colors
+$diagram-arrow: $g6-smoke;
+
@import "dark/telegraf",
"dark/chronograf",
"dark/kapacitor";
diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss
index b6d1661ed..9d6612f6b 100644
--- a/assets/styles/themes/_theme-light.scss
+++ b/assets/styles/themes/_theme-light.scss
@@ -209,6 +209,9 @@ $svg-geo-s2-cell: $b-hydrogen !default;
$svg-geo-region: $br-galaxy !default;
$svg-geo-point: $p-potassium !default;
+// Diagram colors
+$diagram-arrow: $g14-chromium !default;
+
@import "light/telegraf",
"light/chronograf",
"light/kapacitor";
diff --git a/content/enterprise_influxdb/v1.5/concepts/clustering.md b/content/enterprise_influxdb/v1.5/concepts/clustering.md
index 7da493082..80482f956 100644
--- a/content/enterprise_influxdb/v1.5/concepts/clustering.md
+++ b/content/enterprise_influxdb/v1.5/concepts/clustering.md
@@ -15,30 +15,16 @@ This document describes in detail how clustering works in InfluxEnterprise. It s
An InfluxEnterprise installation consists of three separate software processes: Data nodes, Meta nodes, and the Enterprise Web server. To run an InfluxDB cluster, only the meta and data nodes are required. Communication within a cluster looks like this:
-```text
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Meta1 │◀───▶│ Meta2 │
- │ │ │ │
- └───────┘ └───────┘
- ▲ ▲
- │ │
- │ ┌───────┐ │
- │ │ │ │
- └─▶│ Meta3 │◀─┘
- │ │
- └───────┘
-
-─────────────────────────────────
- ╲│╱ ╲│╱
- ┌────┘ └──────┐
- │ │
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Data1 │◀────────▶│ Data2 │
- │ │ │ │
- └───────┘ └───────┘
-```
+{{< diagram >}}
+flowchart TB
+ subgraph meta[Meta Nodes]
+ Meta1 <-- TCP :8089 --> Meta2 <-- TCP :8089 --> Meta3
+ end
+ meta <-- HTTP :8091 --> data
+ subgraph data[Data Nodes]
+ Data1 <-- TCP :8088 --> Data2
+ end
+{{< /diagram >}}
The meta nodes communicate with each other via a TCP protocol and the Raft consensus protocol that all use port `8089` by default. This port must be reachable between the meta nodes. The meta nodes also expose an HTTP API bound to port `8091` by default that the `influxd-ctl` command uses.
diff --git a/content/enterprise_influxdb/v1.6/concepts/clustering.md b/content/enterprise_influxdb/v1.6/concepts/clustering.md
index 00e9249a0..8faec191e 100644
--- a/content/enterprise_influxdb/v1.6/concepts/clustering.md
+++ b/content/enterprise_influxdb/v1.6/concepts/clustering.md
@@ -15,30 +15,16 @@ This document describes in detail how clustering works in InfluxDB Enterprise. I
An InfluxDB Enterprise installation consists of three separate software processes: Data nodes, Meta nodes, and the Enterprise Web server. To run an InfluxDB cluster, only the meta and data nodes are required. Communication within a cluster looks like this:
-```text
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Meta1 │◀───▶│ Meta2 │
- │ │ │ │
- └───────┘ └───────┘
- ▲ ▲
- │ │
- │ ┌───────┐ │
- │ │ │ │
- └─▶│ Meta3 │◀─┘
- │ │
- └───────┘
-
-─────────────────────────────────
- ╲│╱ ╲│╱
- ┌────┘ └──────┐
- │ │
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Data1 │◀────────▶│ Data2 │
- │ │ │ │
- └───────┘ └───────┘
-```
+{{< diagram >}}
+flowchart TB
+ subgraph meta[Meta Nodes]
+ Meta1 <-- TCP :8089 --> Meta2 <-- TCP :8089 --> Meta3
+ end
+ meta <-- HTTP :8091 --> data
+ subgraph data[Data Nodes]
+ Data1 <-- TCP :8088 --> Data2
+ end
+{{< /diagram >}}
The meta nodes communicate with each other via a TCP protocol and the Raft consensus protocol that all use port `8089` by default. This port must be reachable between the meta nodes. The meta nodes also expose an HTTP API bound to port `8091` by default that the `influxd-ctl` command uses.
diff --git a/content/enterprise_influxdb/v1.7/concepts/clustering.md b/content/enterprise_influxdb/v1.7/concepts/clustering.md
index 5714420aa..a5f09fa36 100644
--- a/content/enterprise_influxdb/v1.7/concepts/clustering.md
+++ b/content/enterprise_influxdb/v1.7/concepts/clustering.md
@@ -15,30 +15,16 @@ This document describes in detail how clustering works in InfluxDB Enterprise. I
An InfluxDB Enterprise installation consists of three separate software processes: data nodes, meta nodes, and the Enterprise web server. To run an InfluxDB cluster, only the meta and data nodes are required. Communication within a cluster looks like this:
-```text
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Meta1 │◀───▶│ Meta2 │
- │ │ │ │
- └───────┘ └───────┘
- ▲ ▲
- │ │
- │ ┌───────┐ │
- │ │ │ │
- └─▶│ Meta3 │◀─┘
- │ │
- └───────┘
-
-─────────────────────────────────
- ╲│╱ ╲│╱
- ┌────┘ └──────┐
- │ │
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Data1 │◀────────▶│ Data2 │
- │ │ │ │
- └───────┘ └───────┘
-```
+{{< diagram >}}
+flowchart TB
+ subgraph meta[Meta Nodes]
+ Meta1 <-- TCP :8089 --> Meta2 <-- TCP :8089 --> Meta3
+ end
+ meta <-- HTTP :8091 --> data
+ subgraph data[Data Nodes]
+ Data1 <-- TCP :8088 --> Data2
+ end
+{{< /diagram >}}
The meta nodes communicate with each other via a TCP protocol and the Raft consensus protocol that all use port `8089` by default. This port must be reachable between the meta nodes. The meta nodes also expose an HTTP API bound to port `8091` by default that the `influxd-ctl` command uses.
diff --git a/content/enterprise_influxdb/v1.8/concepts/clustering.md b/content/enterprise_influxdb/v1.8/concepts/clustering.md
index 7bb700c9d..0bee38e31 100644
--- a/content/enterprise_influxdb/v1.8/concepts/clustering.md
+++ b/content/enterprise_influxdb/v1.8/concepts/clustering.md
@@ -17,30 +17,17 @@ This document describes in detail how clustering works in InfluxDB Enterprise. I
An InfluxDB Enterprise installation consists of three separate software processes: data nodes, meta nodes, and the Enterprise web server. To run an InfluxDB cluster, only the meta and data nodes are required. Communication within a cluster looks like this:
-```text
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Meta1 │◀───▶│ Meta2 │
- │ │ │ │
- └───────┘ └───────┘
- ▲ ▲
- │ │
- │ ┌───────┐ │
- │ │ │ │
- └─▶│ Meta3 │◀─┘
- │ │
- └───────┘
+{{< diagram >}}
+flowchart TB
+ subgraph meta[Meta Nodes]
+ Meta1 <-- TCP :8089 --> Meta2 <-- TCP :8089 --> Meta3
+ end
+ meta <-- HTTP :8091 --> data
+ subgraph data[Data Nodes]
+ Data1 <-- TCP :8088 --> Data2
+ end
+{{< /diagram >}}
-─────────────────────────────────
- ╲│╱ ╲│╱
- ┌────┘ └──────┐
- │ │
- ┌───────┐ ┌───────┐
- │ │ │ │
- │ Data1 │◀────────▶│ Data2 │
- │ │ │ │
- └───────┘ └───────┘
-```
The meta nodes communicate with each other via a TCP protocol and the Raft consensus protocol that all use port `8089` by default. This port must be reachable between the meta nodes. The meta nodes also expose an HTTP API bound to port `8091` by default that the `influxd-ctl` command uses.
diff --git a/content/telegraf/v1.10/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.10/concepts/aggregator_processor_plugins.md
index dac341858..62917d73e 100644
--- a/content/telegraf/v1.10/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.10/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.11/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.11/concepts/aggregator_processor_plugins.md
index ed130858c..a043c6788 100644
--- a/content/telegraf/v1.11/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.11/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.12/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.12/concepts/aggregator_processor_plugins.md
index 86b33dd62..3b2aae7f8 100644
--- a/content/telegraf/v1.12/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.12/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.13/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.13/concepts/aggregator_processor_plugins.md
index 5191b22ad..01ef1505e 100644
--- a/content/telegraf/v1.13/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.13/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.14/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.14/concepts/aggregator_processor_plugins.md
index 7c4936cc3..36dddf9f1 100644
--- a/content/telegraf/v1.14/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.14/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.15/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.15/concepts/aggregator_processor_plugins.md
index 3ab8ff0a4..e5072b111 100644
--- a/content/telegraf/v1.15/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.15/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.16/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.16/concepts/aggregator_processor_plugins.md
index bdbb02dd8..4bbcbdc21 100644
--- a/content/telegraf/v1.16/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.16/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.17/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.17/concepts/aggregator_processor_plugins.md
index ce2aaa5bf..7e5bc29ad 100644
--- a/content/telegraf/v1.17/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.17/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶ │ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/content/telegraf/v1.9/concepts/aggregator_processor_plugins.md b/content/telegraf/v1.9/concepts/aggregator_processor_plugins.md
index 518a5a4f8..828b6012e 100644
--- a/content/telegraf/v1.9/concepts/aggregator_processor_plugins.md
+++ b/content/telegraf/v1.9/concepts/aggregator_processor_plugins.md
@@ -10,37 +10,24 @@ menu:
Besides the input plugins and output plugins, Telegraf includes aggregator and processor plugins, which are used to aggregate and process metrics as they pass through Telegraf.
-```
-┌───────────┐
-│ │
-│ CPU │───┐
-│ │ │
-└───────────┘ │
- │
-┌───────────┐ │ ┌───────────┐
-│ │ │ │ │
-│ Memory │───┤ ┌──▶│ InfluxDB │
-│ │ │ │ │ │
-└───────────┘ │ ┌─────────────┐ ┌─────────────┐ │ └───────────┘
- │ │ │ │Aggregate │ │
-┌───────────┐ │ │Process │ │ - mean │ │ ┌───────────┐
-│ │ │ │ - transform │ │ - quantiles │ │ │ │
-│ MySQL │───┼──▶│ - decorate │────▶│ - min/max │───┼──▶│ File │
-│ │ │ │ - filter │ │ - count │ │ │ │
-└───────────┘ │ │ │ │ │ │ └───────────┘
- │ └─────────────┘ └─────────────┘ │
-┌───────────┐ │ │ ┌───────────┐
-│ │ │ │ │ │
-│ SNMP │───┤ └──▶│ Kafka │
-│ │ │ │ │
-└───────────┘ │ └───────────┘
- │
-┌───────────┐ │
-│ │ │
-│ Docker │───┘
-│ │
-└───────────┘
-```
+{{< diagram >}}
+ graph TD
+ Process[Process
- transform
- decorate
- filter]
+ Aggregate[Aggregate
- transform
- decorate
- filter]
+
+ CPU --> Process
+ Memory --> Process
+ MySQL --> Process
+ SNMP --> Process
+ Docker --> Process
+ Process --> Aggregate
+ Aggregate --> InfluxDB
+ Aggregate --> File
+ Aggregate --> Kafka
+
+style Process text-align:left
+style Aggregate text-align:left
+{{< /diagram >}}
**Processor plugins** process metrics as they pass through and immediately emit
results based on the values they process. For example, this could be printing
diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html
index 1d5fc1659..bc5e4edff 100644
--- a/layouts/partials/footer/javascript.html
+++ b/layouts/partials/footer/javascript.html
@@ -19,3 +19,22 @@
+
+{{ if .Page.HasShortcode "diagram" }}
+
+
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/diagram.html b/layouts/shortcodes/diagram.html
new file mode 100644
index 000000000..9aafee8a6
--- /dev/null
+++ b/layouts/shortcodes/diagram.html
@@ -0,0 +1,3 @@
+