Ulf Schneider – Maker and Agile Coach

Ulf Schneider – Maker and Agile Coach Hi, I'm Ulf Schneider, a software maker and agile coach living in Paderborn, Germany. 2026-08-12T17:35:46Z https://ulfschneider.io Ulf Schneider mail@ulfschneider.io Libori 2026-08-02T07:03:02Z https://ulfschneider.io/2026-08-01-libori/ <figure> <img src="https://ulfschneider.io/img/Sj11lqanY5-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/Sj11lqanY5-200.webp 200w, https://ulfschneider.io/img/Sj11lqanY5-1200.webp 1200w" sizes="100vw"> <figcaption>Libori is Paderborn's fair, which is also a major religious celebration. For one week, Christians from around the world gather at Paderborn Cathedral for services and shared celebrations. Since Emil joined the cathedral choir, we feel more connected to this spiritual side of the festival. <a href="https://www.youtube.com/watch?v=ltzSQYjw2Do">Libori 2026</a> shows the opening service at Paderborn Cathedral. Here is a jump right into the <a href="https://www.youtube.com/live/ltzSQYjw2Do?t=4270">singing of the psalms</a>.</figcaption> </figure>

Libori appeared on ulfschneider.io.

Reply via email

Libori RTF 2026-08-02T07:09:25Z https://ulfschneider.io/2026-08-01-libori–rtf/ <p>This year's Libori RTF was a fantastic ride. Perfect weather, beautifully planned routes, excellent organization and catering, and so many friends to meet along the way! What a great day! Here is the <a href="https://www.strava.com/activities/19553989565">Strava Route</a>.</p> <figure> <img src="https://ulfschneider.io/img/pq7_rxyoWv-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/pq7_rxyoWv-200.webp 200w, https://ulfschneider.io/img/pq7_rxyoWv-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/O86y4of_jb-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="676" srcset="https://ulfschneider.io/img/O86y4of_jb-200.webp 200w, https://ulfschneider.io/img/O86y4of_jb-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/MWL1_CYvLm-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/MWL1_CYvLm-200.webp 200w, https://ulfschneider.io/img/MWL1_CYvLm-900.webp 900w" sizes="100vw"> </figure>

Libori RTF appeared on ulfschneider.io.

Reply via email

Cake and coffee 2026-08-02T06:57:38Z https://ulfschneider.io/2026-08-01-cake-and-coffee/ <figure> <img src="https://ulfschneider.io/img/0rNvPH81vk-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/0rNvPH81vk-200.webp 200w, https://ulfschneider.io/img/0rNvPH81vk-1200.webp 1200w" sizes="100vw"> <figcaption>Emil wanted to do something special for me and baked a cake and cooked coffee. What a lovely surprise.</figcaption> </figure>

Cake and coffee appeared on ulfschneider.io.

Reply via email

Free time 2026-07-05T10:48:28Z https://ulfschneider.io/2026-07-05-free-time/ <figure> <img src="https://ulfschneider.io/img/0J2SRFF4q0-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/0J2SRFF4q0-200.webp 200w, https://ulfschneider.io/img/0J2SRFF4q0-1200.webp 1200w" sizes="100vw"> </figure>

Free time appeared on ulfschneider.io.

Reply via email

Why Agile Works 2026-06-23T05:11:46Z https://ulfschneider.io/2026-06-23-why-agile-works/ <p>The <a href="https://ulfschneider.io/assets/why-agile-works/"><cite>Why Agile Works</cite></a> slide deck can be used for a two-hour interactive session exploring the reasoning behind agile software development, without referring to any specific agile method.</p>

Why Agile Works appeared on ulfschneider.io.

Reply via email

Joy 2026-06-21T17:24:17Z https://ulfschneider.io/2026-06-21-joy/ <figure> <img src="https://ulfschneider.io/img/7kTLmRiSs3-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/7kTLmRiSs3-200.webp 200w, https://ulfschneider.io/img/7kTLmRiSs3-1200.webp 1200w" sizes="100vw"> </figure>

Joy appeared on ulfschneider.io.

Reply via email

Mit dem Rad von Paderborn nach Dänemark 2026-06-12T08:56:53Z https://ulfschneider.io/2026-06-12-444/ <p>20 Radfahrer, 660 Kilometer, ein Ziel – Radelnde Rotarier sammeln 75.000 Euro für Fahrräder, die Menschen in Sambia helfen sollen.</p> <p><a href="https://www1.wdr.de/nrw/ostwestfalen-lippe/kreis-paderborn/paderborn-aarhus-radtour-spenden-100.html"><cite>Mit dem Rad von Paderborn nach Dänemark</cite></a></p>

Mit dem Rad von Paderborn nach Dänemark appeared on ulfschneider.io.

Reply via email

RTF Durch das Hochstift & Löckenhoff Bike-Day 2026-06-21T17:37:53Z https://ulfschneider.io/2026-06-05-RTF/ <figure> <img src="https://ulfschneider.io/img/BA1hyk540y-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/BA1hyk540y-200.webp 200w, https://ulfschneider.io/img/BA1hyk540y-1200.webp 1200w" sizes="100vw"> <figcaption>The ambitious gravel group on the Löckenhoff Bike-Day</figcaption> </figure> <p>Save the date: As a result of the collaboration between my cycling club, the <em>Rad-Treff Borchen</em>, and the bicycle shop <em>Löckenhoff</em>, as one of our sponsors, you have the chance to ride a variety of organized routes on Sunday, 14th June, 2026!</p> <p>Starting point is the Löckenhoff shop at Karl-Schurz-Str. 14, in Paderborn. You can do RTF road cycling from 58 km, over 97 km, 125 km, up to 177 km, including catering on the routes. Starting is 08:00 - 09:30. Get details and GPX tracks at <a href="https://rad-treff-borchen.de/rtf_2026/">RTF Durch das Hochstift</a>.</p> <p>And you can do Gravel on two routes, 25 km and 52 km, with catering on the 52 km route. Starting at 12:00, guided! Details and GPX tracks at <a href="https://rad-treff-borchen.de/loeckenhoff-gravelrides/">Löckenhoff Gravelrides</a>.</p> <figure> <img src="https://ulfschneider.io/img/yN3ybl22H9-200.webp" alt="" loading="lazy" decoding="async" width="2480" height="3508" srcset="https://ulfschneider.io/img/yN3ybl22H9-200.webp 200w, https://ulfschneider.io/img/yN3ybl22H9-2480.webp 2480w" sizes="100vw"> </figure>

RTF Durch das Hochstift & Löckenhoff Bike-Day appeared on ulfschneider.io.

Reply via email

Cuddle time 2026-06-21T18:03:42Z https://ulfschneider.io/2026-05-01-cuddle-time/ <figure> <img src="https://ulfschneider.io/img/oEcKJDvS_E-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/oEcKJDvS_E-200.webp 200w, https://ulfschneider.io/img/oEcKJDvS_E-1200.webp 1200w" sizes="100vw"> </figure>

Cuddle time appeared on ulfschneider.io.

Reply via email

Robust enums in Go 2026-04-27T05:25:14Z https://ulfschneider.io/2026-04-26-go-enums/ <p>Yet another article on the topic</p> <p>In a programming situation an enum should provide:</p> <ul> <li>self-documenting constant identifiers,</li> <li>easy logging, marshaling and unmarshaling,</li> <li>type safety,</li> <li>and being able to iterate over the enum values.</li> </ul> <p>Go does not support enums natively and some of the patterns developers use to handle enums in Go have drawbacks, as you can read in <a href="https://threedots.tech/post/safer-enums-in-go/"><cite>Safer Enums in Go</cite></a>. I've come to use a slug-based approach that is iterable and gets close enough to type-safety for practical purposes. In my view it gives a good balance of safety and implementation effort.</p> <div class="table-of-contents"><ol><li><a href="https://ulfschneider.io/2026-04-26-go-enums/#slug-based">Slug-based</a></li><li><a href="https://ulfschneider.io/2026-04-26-go-enums/#type-safe">Type-safe</a></li><li><a href="https://ulfschneider.io/2026-04-26-go-enums/#iterable">Iterable</a></li></ol></div> <h2 id="slug-based" tabindex="-1">Slug-based</h2> <p>A slug refers to a string that is lowercase, contains no spaces (using - or _ instead), is human-readable, and safe to use in URLs, JSON, and databases. In Go it can be implemented like:</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token keyword">package</span> job <span class="token comment">// Status represents the lifecycle state of a job.</span> <span class="token keyword">type</span> Status <span class="token builtin">string</span> <span class="token comment">// Possible status values for a job.</span> <span class="token keyword">const</span> <span class="token punctuation">(</span> StatusPending Status <span class="token operator">=</span> <span class="token string">"pending"</span> StatusCancel Status <span class="token operator">=</span> <span class="token string">"cancel"</span> StatusProcessing Status <span class="token operator">=</span> <span class="token string">"processing"</span> StatusCompleted Status <span class="token operator">=</span> <span class="token string">"completed"</span> StatusCanceled Status <span class="token operator">=</span> <span class="token string">"canceled"</span> StatusFailed Status <span class="token operator">=</span> <span class="token string">"failed"</span> <span class="token punctuation">)</span></code></pre> <p>Slugs are self-documenting and work equally well for logging and marshaling, something the Go <code>iota</code> approach does not give you. The constant identifier <code>StatusPending</code> is as readable as the slug <code>"pending"</code>. However, the above code will not let you iterate over all constant values and it is not type-safe.</p> <h2 id="type-safe" tabindex="-1">Type-safe</h2> <p>The slug-based approach cannot be made type-safe. The following is possible:</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token comment">// s should hold only defined status values,</span> <span class="token comment">// but the following assignment of an arbitrary value </span> <span class="token comment">// will not raise a compiler complaint</span> <span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token function">Status</span><span class="token punctuation">(</span><span class="token string">"arbitrary value"</span><span class="token punctuation">)</span></code></pre> <p>To improve in this area, you can do:</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token comment">// KnownStatuses is a slice with all possible status values</span> <span class="token keyword">var</span> KnownStatuses <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>Status<span class="token punctuation">{</span>StatusPending<span class="token punctuation">,</span> StatusCancel<span class="token punctuation">,</span> StatusProcessing<span class="token punctuation">,</span> StatusCompleted<span class="token punctuation">,</span> StatusCanceled<span class="token punctuation">,</span> StatusFailed<span class="token punctuation">}</span> <span class="token comment">// knownStatusSes is a set with fast access to each status</span> <span class="token keyword">var</span> knownStatusesSet <span class="token operator">=</span> MakeSet<span class="token punctuation">[</span>Status<span class="token punctuation">]</span><span class="token punctuation">(</span>KnownStatuses<span class="token punctuation">)</span> <span class="token comment">// ParseStatus will parse s into a job status</span> <span class="token keyword">func</span> <span class="token function">ParseStatus</span><span class="token punctuation">(</span>s <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">(</span>Status<span class="token punctuation">,</span> <span class="token builtin">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> status <span class="token operator">:=</span> <span class="token function">Status</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token boolean">_</span><span class="token punctuation">,</span> ok <span class="token operator">:=</span> knownStatusesSet<span class="token punctuation">[</span>status<span class="token punctuation">]</span><span class="token punctuation">;</span> ok <span class="token punctuation">{</span> <span class="token keyword">return</span> status<span class="token punctuation">,</span> <span class="token boolean">nil</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token string">""</span><span class="token punctuation">,</span> fmt<span class="token punctuation">.</span><span class="token function">Errorf</span><span class="token punctuation">(</span><span class="token string">"unknown job status: %s"</span><span class="token punctuation">,</span> s<span class="token punctuation">)</span> <span class="token punctuation">}</span></code></pre> <p><code>ParseStatus</code> will parse any <code>string</code> and ensure it can be parsed into a valid <code>Status</code>, or an <code>error</code> is raised. It is still required by the programmer to call <code>ParseStatus</code> when transforming a <code>string</code> into a <code>Status</code>, like when unmarshaling from a JSON value to a <code>Status</code> value, but in this situation you have to do something like <code>s = Status("processing")</code> regardless, so you may as well do <code>s = job.ParseStatus("processing")</code>.</p> <p>A possible enhancement for a validation when you <em>do not control</em> the parsing situation, because someone else is handing over a <code>Status</code> to you, is:</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token comment">// IsValidStatus will return true if s is a known job status</span> <span class="token keyword">func</span> <span class="token function">IsValidStatus</span><span class="token punctuation">(</span>s Status<span class="token punctuation">)</span> <span class="token punctuation">(</span><span class="token builtin">bool</span><span class="token punctuation">,</span> <span class="token builtin">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token boolean">_</span><span class="token punctuation">,</span> err <span class="token operator">:=</span> <span class="token function">ParseStatus</span><span class="token punctuation">(</span><span class="token function">string</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> err <span class="token operator">!=</span> <span class="token boolean">nil</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">,</span> err <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">nil</span> <span class="token punctuation">}</span></code></pre> <p>When using <code>ParseStatus</code> and <code>IsValidStatus</code> at key locations in the code, I think we get something that is close enough to type-safety, which allows to work in all other code locations with <em>unguarded</em> access to <code>Status</code>.</p> <p><code>MakeSet</code> is a helper function that will transform a <code>slice</code> into a set , and as such, it can be useful as well in other situations. Note that Go does not have a native set type; they are typically implemented as maps with empty struct values since an empty struct consumes no memory.</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token keyword">func</span> MakeSet<span class="token punctuation">[</span>T comparable<span class="token punctuation">]</span><span class="token punctuation">(</span>values <span class="token punctuation">[</span><span class="token punctuation">]</span>T<span class="token punctuation">)</span> <span class="token keyword">map</span><span class="token punctuation">[</span>T<span class="token punctuation">]</span><span class="token keyword">struct</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">{</span> m <span class="token operator">:=</span> <span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">map</span><span class="token punctuation">[</span>T<span class="token punctuation">]</span><span class="token keyword">struct</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">len</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token boolean">_</span><span class="token punctuation">,</span> v <span class="token operator">:=</span> <span class="token keyword">range</span> values <span class="token punctuation">{</span> m<span class="token punctuation">[</span>v<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">struct</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> m <span class="token punctuation">}</span></code></pre> <h2 id="iterable" tabindex="-1">Iterable</h2> <p>It is most straightforward to iterate over <code>KnownStatuses</code>:</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token keyword">for</span> s <span class="token operator">:=</span> <span class="token keyword">range</span> KnownStatuses <span class="token punctuation">{</span> <span class="token comment">// do something with s</span> <span class="token punctuation">}</span></code></pre> <p>When the <code>KnownStatuses</code> should not be exposed outside of the job package, you can make a range-over-func (you need Go 1.23+ for this to work):</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token comment">// keep knownStatus inside of the job package</span> <span class="token keyword">var</span> knownStatuses <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>Status<span class="token punctuation">{</span>StatusPending<span class="token punctuation">,</span> StatusCancel<span class="token punctuation">,</span> StatusProcessing<span class="token punctuation">,</span> StatusCompleted<span class="token punctuation">,</span> StatusCanceled<span class="token punctuation">,</span> StatusFailed<span class="token punctuation">}</span> <span class="token comment">// AllStatuses is a range-over-func that </span> <span class="token comment">// exposes an iterator over all job status values</span> <span class="token keyword">func</span> <span class="token function">AllStatuses</span><span class="token punctuation">(</span>yield <span class="token keyword">func</span><span class="token punctuation">(</span>Status<span class="token punctuation">)</span> <span class="token builtin">bool</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token boolean">_</span><span class="token punctuation">,</span> s <span class="token operator">:=</span> <span class="token keyword">range</span> knownStatuses <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token operator">!</span><span class="token function">yield</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></code></pre> <p>Outside of the <code>job</code> package the range-over-func allows to iterate over all job status values without exposing the <code>knownStatuses</code> slice.</p> <pre class="language-go" data-language="go"><code class="language-go"><span class="token keyword">for</span> s <span class="token operator">:=</span> <span class="token keyword">range</span> job<span class="token punctuation">.</span>AllStatuses <span class="token punctuation">{</span> fmt<span class="token punctuation">.</span><span class="token function">Println</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token punctuation">}</span></code></pre>

Robust enums in Go appeared on ulfschneider.io.

Reply via email

Springtime market 2026-04-19T07:05:28Z https://ulfschneider.io/2026-04-19-springtime-market/ <figure> <img src="https://ulfschneider.io/img/na_RKI1Wsn-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/na_RKI1Wsn-200.webp 200w, https://ulfschneider.io/img/na_RKI1Wsn-1200.webp 1200w" sizes="100vw"> <figcaption>This weekend the people of our local market asked the children to draw images of the springtime market. Emil joined happily because there was the change to get a prize for the drawings that received the most up-votes from visitors.</figcaption> </figure>

Springtime market appeared on ulfschneider.io.

Reply via email

Keep your email address away from spammers 2026-04-12T08:06:45Z https://ulfschneider.io/2026-04-10-obfuscate-email/ <p>Use <a href="https://spencermortensen.com/articles/email-obfuscation/"><cite>Email address obfuscation: What works in 2026?</cite></a> by Spencer Mortensen to keep your email address away from spammers.</p> <p>This could be a case for a web component combining multiple of the presented techniques. Unfortunately, what really works requires JavaScript, which can be an issue. My favorite pattern so far is <em>2.10 User Interaction</em>, because it provides decent protection against spammers without additional library dependencies. I am using it with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and CSS class name selectors <code>.oma</code> for <em>obfuscated email address</em> and <code>.oml</code> for <em>obfuscated email link</em>.</p> <pre class="language-js" data-language="JavaScript"><code class="language-js"><span class="token comment">// email obfuscation</span> <span class="token keyword">const</span> mObserver <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span><span class="token punctuation">(</span>decode<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">decode</span><span class="token punctuation">(</span><span class="token parameter">entries<span class="token punctuation">,</span> observer</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> parts <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"o"</span><span class="token punctuation">,</span> <span class="token string">"n"</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token string">"l"</span><span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"@"</span><span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"u"</span><span class="token punctuation">,</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"k"</span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">,</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"o"</span><span class="token punctuation">,</span> <span class="token string">"m"</span><span class="token punctuation">]</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> e <span class="token keyword">of</span> entries<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>isIntersecting <span class="token operator">&&</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"oml"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"href"</span><span class="token punctuation">,</span> <span class="token string">"mai"</span> <span class="token operator">+</span> <span class="token string">"lto"</span> <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> parts<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span> mObserver<span class="token punctuation">.</span><span class="token function">unobserve</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>isIntersecting <span class="token operator">&&</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"oma"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText <span class="token operator">=</span> parts<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> mObserver<span class="token punctuation">.</span><span class="token function">unobserve</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>o <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".oml,.oma"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> mObserver<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token string">"loading"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"DOMContentLoaded"</span><span class="token punctuation">,</span> observe<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></code></pre> <p>To challenge the crawler a bit more, you could put that script into a dedicated file <code>mail.js</code>, and load it from inside of your <code>head</code>, like:</p> <pre class="language-js" data-language="JavaScript"><code class="language-js"><span class="token operator"><</span>script<span class="token operator">></span> <span class="token comment">//challenge the crawler!</span> <span class="token keyword">const</span> s <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span> s<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"/js/mail.js"</span> document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre> <p>This will require the crawler to</p> <ul> <li>execute JS,</li> <li>discover the dynamic script,</li> <li>load the script, and</li> <li>execute it,</li> </ul> <p>to get your email address.</p>

Keep your email address away from spammers appeared on ulfschneider.io.

Reply via email

Have fun 2026-04-03T08:14:10Z https://ulfschneider.io/2026-04-03-have-fun/ <figure> <img src="https://ulfschneider.io/img/Xnm4fx19er-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/Xnm4fx19er-200.webp 200w, https://ulfschneider.io/img/Xnm4fx19er-1200.webp 1200w" sizes="100vw"> </figure>

Have fun appeared on ulfschneider.io.

Reply via email

JSON Web Tokens 2026-03-25T09:34:52Z https://ulfschneider.io/2026-03-25-jwt/ <p><a href="https://www.jwt.io/introduction"><cite>jwt.io/introduction</cite></a> is a good introduction to JWTs.</p> <p>Tool-wise <a href="https://www.authgear.com/tools/jwt-jwe-debugger"><cite>authgear.com/tools/jwt-jwe-debugger</cite></a> is probably a good choice, as it runs completely in the web browser. Authgear claims:</p> <blockquote> <p>Your data security is our top priority. All encoding, decoding, encryption and decryption happen in this browser. This tool does not store or send your JWT and JWE outside of the browser.</p> </blockquote>

JSON Web Tokens appeared on ulfschneider.io.

Reply via email

Come, join our cycling route from Paderborn to Aarhus 2026-06-05T13:46:29Z https://ulfschneider.io/2026-03-14-44444/ <p>From May 30 to June 3, we will ride from Paderborn in Germany to Aarhus in Denmark in four days. The route covers 625 kilometers of road cycling with 3,190 meters of elevation gain. The event is organized by the <a href="https://www.cyclingtoserve.org">Rotary Fellowship Cycling to Serve</a> in collaboration with local cycling clubs and everyone is invited to join! The <a href="https://rad-treff-borchen.de/projekt-4-444-4/">Rad-Treff Borchen planned the day-to-day routes</a>.</p> <figure> <iframe src="https://www.komoot.com/de-de/tour/2874466421/embed?share_token=aKv38DM6wNpIarZA6ON4Lf3qN5XtZfuXgg2W02fvQO9dWvXS4i&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </figure> <p>This is not only an inspiring cycling event; it is a fantastic way to help! We're aiming to gather donations to buy <a href="https://fund.worldbicyclerelief.org/de-DE/project/rotary-cycling-team?tab=ubersicht&yby6rfrrwwbr7xhah335hpglly=qLswiCWUFUZ1L3g2UXlSmGRfFxunUjgHxUAYBrnGf_VMOr4tOvUqUXbGdTD86ryAv54uklRx">444 Buffalo Bikes</a> for <a href="https://worldbicyclerelief.org/">World Bicycle Relief</a>. 147 euros will fund a Buffalo Bike for someone in need.</p> <p>As we arrive in Aarhus, the <a href="https://4days-favrskov.dk">4Days of Favrskov</a> will begin, and that's another cycling event aiming to contribute to the donation goal. So, the name <span class="inline-block">4 444 4</span> might make more sense now – ride 4 days to help fund 444 bikes, and if you like, take part in the 4Days of Favrskov 😃!</p> <p>On our ride to Aarhus you’re welcome to join us 🚴 for a day or a part of a day! The route is divided into nine sections with clear meeting spots, so you can easily hop on. Riders with a German Cycling license can even earn official kilometers for their clubs during the event. Though, it's not required to have a license nor to be organized with Rotary. Your passion for road cycling will bring you in.</p> <dl class="line-list marker"> <dt>May 29, 19:00 Warm up and fundraising party</dt> <dd> Meet us at<br> Deelenhaus<br> Krämerstraße 8<br> Paderborn</dd> <dt>May 30, 09:30 Paderborn → Detmold </dt> <dd> Starting point is<br> Zahnmedizinisches Zentrum<br> Mersinweg 26<br> 33100 Paderborn <iframe src="https://www.komoot.com/de-de/tour/2843597669/embed?share_token=av4Et9Gvnn6crJsz5XEfCnMQ40MUh8PjB0JYOZgG2xVntVLH4S&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>May 30, 12:00 Detmold → Nienburg </dt> <dd> Starting point is<br> Arminstraße 65A<br> Detmold <iframe src="https://www.komoot.com/de-de/tour/2843606385/embed?profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>May 31, 09:30 Nienburg → Rothenburg (Wümme) </dt> <dd> Starting point is<br> Schlossplatz<br> Nienburg <iframe src="https://www.komoot.com/de-de/tour/2874378512/embed?share_token=azYwp3gt3Mt7uTGsIuXONaWtiMGLYhyrO92fNLej6WZSenXjp5&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>May 31, 13:30 Rothenburg (Wümme) → Hamburg/Hagenbeck </dt> <dd> Starting point is<br> Große Str. 1<br> Rothenburg (Wümme) <iframe src="https://www.komoot.com/de-de/tour/2874383615/embed?share_token=aGOT2T4MDlEi8is6ClUl3Z6v3KT8gWnX2MGhYORqeQsmqdQsH7&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 1, 09:30 Hamburg → Aukrug </dt> <dd> Starting point is<br> Tierpark Hagenbeck<br> Lokstedter Grenzstraße 2<br> Hamburg <iframe src="https://www.komoot.com/de-de/tour/2874384244/embed?share_token=aaRfo8uzsfbkycXx4gAsY46U2uwTHV62ajlZy45Zv0auv5rP5O&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 1, 13:30 Aukrug → Schleswig </dt> <dd> Starting point is<br> Fahrrad Raststation und Eisdiele<br> Itzehoer Str. 2<br> Aukrug <iframe src="https://www.komoot.com/de-de/tour/2874385215/embed?share_token=a894QQDW0C2bD19Iv80Tjg9Pv2IbBor62XUoWKo1sMa0UE0AHy&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 2, 09:30 Schleswig → Flensburg </dt> <dd> Starting point is<br> F-Ritz Hotel Schleswig<br> Friedrichstr. 100<br> Schleswig <iframe src="https://www.komoot.com/de-de/tour/2874386024/embed?share_token=aSY9TP25GZnYk0qbdkq4mVsitO44twvyI5EBzH3fK23FJOrjZG&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 2, 12:00 Flensburg → Vejle </dt> <dd> Starting point is<br> Ben's Fischhütte<br> Museumshafen<br> Flensburg <iframe src="https://www.komoot.com/de-de/tour/2874387064/embed?share_token=a5jKvS14D4rDht39G5Ou3OtrymKBOyRwnsF4rNp8n304Ld2zVD&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 3, 10:00 Vejle → Aarhus </dt> <dd> Starting point is<br> Willy Sørensens Plads 3<br> 7100 Vejle <iframe src="https://www.komoot.com/de-de/tour/2874389414/embed?share_token=aXaKnPFzRs3ZrRZOJBAmxhyoOQsjPN6pk1Nxi3jQGE2kbiCHI8&profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 4, 15:00 Our final destination and the beginning of the <a href="https://4days-favrskov.dk">4Days of Favrskov</a> in Aarhus</dt> </dl> <figure><img src="https://ulfschneider.io/img/0P_1ylXRJW-200.webp" alt="" loading="lazy" decoding="async" width="1600" height="726" srcset="https://ulfschneider.io/img/0P_1ylXRJW-200.webp 200w, https://ulfschneider.io/img/0P_1ylXRJW-1600.webp 1600w" sizes="100vw"></figure>

Come, join our cycling route from Paderborn to Aarhus appeared on ulfschneider.io.

Reply via email

Coziness 2026-04-03T08:14:01Z https://ulfschneider.io/2026-03-09-coziness/ <figure> <img src="https://ulfschneider.io/img/bjhgYUKAxQ-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/bjhgYUKAxQ-200.webp 200w, https://ulfschneider.io/img/bjhgYUKAxQ-1200.webp 1200w" sizes="100vw"> </figure>

Coziness appeared on ulfschneider.io.

Reply via email

Laughter 2026-02-03T18:46:40Z https://ulfschneider.io/2026-02-03-laughter/ <figure> <img src="https://ulfschneider.io/img/9GWAE6IfH9-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/9GWAE6IfH9-200.webp 200w, https://ulfschneider.io/img/9GWAE6IfH9-1200.webp 1200w" sizes="100vw"> </figure>

Laughter appeared on ulfschneider.io.

Reply via email

Accessibility for everyone 2026-02-03T18:46:33Z https://ulfschneider.io/2026-02-03-accessibility-for-everyone/ <p><a href="https://accessibilityforeveryone.site"><cite>Accessibility for everyone</cite></a> by Laura Kalbag is now available online for free.</p>

Accessibility for everyone appeared on ulfschneider.io.

Reply via email

pure prompt 2026-01-28T06:06:31Z https://ulfschneider.io/2026-01-27-pure/ <p>Pretty, minimal and fast ZSH prompt</p> <p><a href="https://github.com/sindresorhus/pure"><cite>pure</cite></a> by Sindre Sorhus is a prompt enhancement for ZSH.</p> <figure class="max-w-sm"> <img src="https://ulfschneider.io/img/cLqdfO9FTf-200.webp" alt="" loading="lazy" decoding="async" width="724" height="138" srcset="https://ulfschneider.io/img/cLqdfO9FTf-200.webp 200w, https://ulfschneider.io/img/cLqdfO9FTf-724.webp 724w" sizes="100vw"> <figcaption>My pure prompt. I like to see my current folder and the Git status in a dedicated line, followed by a new line for inputting my commands.</figcaption> </figure> <p>My settings in the <code>.zshrc</code> file:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token comment"># .zshrc </span> <span class="token comment"># Pure prompt</span> <span class="token assign-left variable">fpath</span><span class="token operator">+=</span><span class="token punctuation">(</span><span class="token string">"<span class="token variable"><span class="token variable">$(</span>brew <span class="token parameter variable">--prefix</span><span class="token variable">)</span></span>/share/zsh/site-functions"</span><span class="token punctuation">)</span> autoload <span class="token parameter variable">-U</span> promptinit<span class="token punctuation">;</span> promptinit prompt pure zstyle :prompt:pure:path color cyan zstyle :prompt:pure:git:branch color yellow</code></pre>

pure prompt appeared on ulfschneider.io.

Reply via email

Learning Go 2026-04-26T18:30:13Z https://ulfschneider.io/2026-01-24-golang-resources/ <p>I find these resources useful for learning Go</p> <div class="table-of-contents"><ol><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#go">Go</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#test">Test</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#error-handling">Error handling</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#vulnerability-management">Vulnerability management</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#folder-structure">Folder structure</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#logging">Logging</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#json">JSON</a></li></ol></div> <h2 id="go" tabindex="-1">Go</h2> <ul> <li><a href="https://gobyexample.com"><cite>gobyexample.com</cite></a> excellent examples with short and clear explanations, by <a href="https://markmcgranaghan.com">Mark McGranaghan</a> and <a href="https://eli.thegreenplace.net">Eli Bendersky</a></li> <li><a href="https://threedots.tech/go-in-one-evening/"><cite>Go in one evening</cite></a> a practical course for experienced programmers. It's excellent, but it took me more than one evening.</li> <li><a href="https://www.youtube.com/@FloWoelki"><cite>youtube.com/@FloWoelki</cite></a> watch and listen while Florian is coding</li> <li><a href="https://google.github.io/styleguide/go/index"><cite>Google Go Styleguide</cite></a> <q>The Go Style Guide and accompanying documents codify the current best approaches for writing readable and idiomatic Go</q> at Google. It has three parts: the style guide, a more verbose style decisions, and best practices.</li> <li><a href="https://100go.co"><cite>100 Go mistakes and how to avoid them</cite></a> a summary of the original book with the same title by Teiva Harsanyi</li> </ul> <h2 id="test" tabindex="-1">Test</h2> <p><a href="https://www.youtube.com/watch?v=TG5cRcBihCM"><cite>Testen in Go (Golang) in 90 Minuten // deutsch</cite></a>, Golo Roden, the native web GmbH</p> <h2 id="error-handling" tabindex="-1">Error handling</h2> <p><a href="https://www.jetbrains.com/guide/go/tutorials/handle_errors_in_go/"><cite>How to Handle Errors in Go</cite></a>, JetBrains blog</p> <h2 id="vulnerability-management" tabindex="-1">Vulnerability management</h2> <p><a href="https://pkg.go.dev/golang.org/x/vuln/cmd/govulncheck"><cite>govulncheck</cite></a> Go documentation</p> <h2 id="folder-structure" tabindex="-1">Folder structure</h2> <ul> <li><a href="https://go.dev/doc/modules/layout"><cite>Organizing a Go module</cite></a> the official Go guide</li> <li><a href="https://github.com/golang-standards/project-layout"><cite>Standard Go Project Layout</cite></a></li> <li><a href="https://www.youtube.com/watch?v=2k0GYWBGGFM"><cite>Go (Golang): Endlich Struktur im Code // deutsch</cite></a>, Golo Roden, the native Web GmbH, the recommendation is to not create a pkg folder</li> <li><a href="https://medium.com/golang-learn/go-project-layout-e5213cdcfaa2"><cite>Go Project Layout</cite></a> article on Medium by Kyle C. Quest</li> <li><a href="https://bontus.medium.com/embrace-the-internal-package-a-go-project-structure-for-clarity-2207bacb4bed"><cite>Embrace the Internal Package: A Go-Project Structure for Clarity.</cite></a> article on Medium by Ikwechegh Ukandu</li> </ul> <h2 id="logging" tabindex="-1">Logging</h2> <ul> <li><a href="https://betterstack.com/community/guides/logging/logging-in-go/"><cite>Logging in Go with Slog: The Ultimate Guide</cite></a> a betterstack.com article by Ayooluwa Isaiah</li> <li><a href="https://betterstack.com/community/guides/logging/golang-contextual-logging/"><cite>Contextual Logging in Go with Slog</cite></a> a betterstack.com article by Percy Bolmér</li> <li><a href="https://dusted.codes/creating-a-pretty-console-logger-using-gos-slog-package"><cite>Creating a pretty console logger using Go's slog package</cite></a>, a concrete explanation resulting in a pretty useful slog TextHandler with colored console output that does not add any dependency to your code, Dusted Codes</li> <li><a href="https://github.com/golang/example/tree/master/slog-handler-guide"><cite>A guide to writing slog handlers</cite></a>, Jonathan Amsterdam, jba@google.com</li> <li><a href="https://pkuebler.de/posts/slog-glossy/"><cite>Slog Handler für bessere Lesbarkeit in lokalen Logs</cite></a></li> <li><a href="https://medium.com/@thisara.weerakoon2001/implementing-a-dynamic-package-level-logger-in-go-949d573a2192"><cite>Implementing a Dynamic Package-Level Logger in Go</cite></a> a medium.com article by Thisara Weerakoon, this shows how to dynamically set log levels for certain packages and touches the <a href="https://github.com/knadh/koanf"><cite>koanf</cite></a> package to manage the logging configuration</li> </ul> <h2 id="json" tabindex="-1">JSON</h2> <ul> <li>Convert JSON to Go structs with <a href="https://mholt.github.io/json-to-go/"><cite>JSON to Go</cite></a></li> </ul>

Learning Go appeared on ulfschneider.io.

Reply via email

Creating a scroll-spy with two lines of CSS 2026-01-20T07:35:35Z https://ulfschneider.io/2026-01-20-scroll-spy/ <p>Two incredible lines of CSS code to reflect the current scroll position in a table of contents, by Una Kravets: <a href="https://una.im/scroll-target-group/"><cite>Creating a scroll-spy with 2 lines of CSS</cite></a>. This required JavaScript coding in the past.</p>

Creating a scroll-spy with two lines of CSS appeared on ulfschneider.io.

Reply via email

Good Luck and Success 2026-01-01T13:16:23Z https://ulfschneider.io/2026-01-01-good-luck-and-success/ <figure> <img src="https://ulfschneider.io/img/oVszQFleUw-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/oVszQFleUw-200.webp 200w, https://ulfschneider.io/img/oVszQFleUw-1200.webp 1200w" sizes="100vw"> </figure>

Good Luck and Success appeared on ulfschneider.io.

Reply via email

bikeinsights.com 2025-12-28T06:37:22Z https://ulfschneider.io/2025-12-27-bike-insights/ <p><a href="https://bikeinsights.com"><cite>bikeinsights.com</cite></a> offers a bike geometry database that allows to search and compare bike frames. Their blog article <a href="https://blog.bikeinsights.com/how-bikes-are-measured/"><cite>How Bikes are Measured</cite></a> made me aware normalizing the different ways of measuring bikes is absolutely required to come to meaningful comparisons of bike frames.</p>

bikeinsights.com appeared on ulfschneider.io.

Reply via email

Sentimental Chaos 2025-12-23T14:38:49Z https://ulfschneider.io/2025-12-23-sentimental-chaos/ <figure> <img src="https://ulfschneider.io/img/_V0enbw67o-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/_V0enbw67o-200.webp 200w, https://ulfschneider.io/img/_V0enbw67o-900.webp 900w" sizes="100vw"> <figcaption>Sentimental Chaos</figcaption> </figure>

Sentimental Chaos appeared on ulfschneider.io.

Reply via email

qrvc 2026-01-07T13:43:04Z https://ulfschneider.io/tools/qrvc/ <p>Use the command line to make a QR code from a vCard</p> <p><a href="https://pkg.go.dev/github.com/ulfschneider/qrvc"><cite>qrvc</cite></a> is a command line tool that allows to prepare a QR code from vCard data.</p> <figure> <img src="https://ulfschneider.io/img/LZAIatoE45-200.webp" alt="" loading="lazy" decoding="async" width="400" height="400" srcset="https://ulfschneider.io/img/LZAIatoE45-200.webp 200w, https://ulfschneider.io/img/LZAIatoE45-400.webp 400w" sizes="100vw"> <figcaption>A QR code for a fictional vCard</figcaption> </figure> <p>One way to create the QR code is by providing a vCard file as input and process that. If you do not have a vCard file, <strong>qrvc</strong> will ask you for data input and will then create a vCard file and a QR code for you.</p> <p>Your data remains on your computer and nowhere else.</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/pceeBgJtmS-200.webp" alt="" loading="lazy" decoding="async" width="1090" height="1012" srcset="https://ulfschneider.io/img/pceeBgJtmS-200.webp 200w, https://ulfschneider.io/img/pceeBgJtmS-1090.webp 1090w" sizes="100vw"> <figcaption><strong>qrvc</strong> in interactive mode</figcaption> </figure> <h2 id="installation" tabindex="-1">Installation</h2> <h3 id="install-with-homebrew-on-mac-and-linux" tabindex="-1">Install with Homebrew on Mac and Linux</h3> <pre class="language-sh" data-language="Shell"><code class="language-sh">brew tap ulfschneider/tap brew <span class="token function">install</span> <span class="token parameter variable">--cask</span> qrvc</code></pre> <h3 id="install-with-go-on-any-machine-that-has-go-on-board" tabindex="-1">Install with Go on any machine that has Go on board</h3> <pre class="language-sh" data-language="Shell"><code class="language-sh">go <span class="token function">install</span> github.com/ulfschneider/qrvc@latest</code></pre> <h3 id="manual-install" tabindex="-1">Manual install</h3> <p>You can also download the appropriate binary directly from GitHub Releases:</p> <p>Visit <a href="https://github.com/ulfschneider/qrvc/releases">github.com/ulfschneider/qrvc/releases</a></p> <ol> <li>Download the archive matching your OS and architecture</li> <li>Extract it</li> <li>Move the binary to a directory included in your PATH (for example /usr/local/bin)</li> </ol> <h3 id="verify-the-installation" tabindex="-1">Verify the installation</h3> <pre class="language-sh" data-language="Shell"><code class="language-sh">qrvc <span class="token parameter variable">--version</span></code></pre> <p>This command should print out the qrvc version you are using.</p> <h2 id="usage" tabindex="-1">Usage</h2> <p>After installation, start the tool by typing:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">qrvc</code></pre> <p>When using the <code>-h</code> flag, you get information about how to use it:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">qrvc <span class="token parameter variable">-h</span></code></pre>

qrvc appeared on ulfschneider.io.

Reply via email

Freeze 2025-11-28T05:37:37Z https://ulfschneider.io/2025-11-23-freeze/ <p>Make images from text</p> <p><a href="https://github.com/charmbracelet/freeze"><cite>Freeze</cite></a> can create images from text files and from shell command output. E.g.</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">freeze <span class="token parameter variable">--execute</span> <span class="token string">"ls -ls"</span> <span class="token parameter variable">-o</span> freeze-ls-ls.png</code></pre> <p>will create a file <code>freeze-ls-ls.png</code> that shows the result of the <code>ls -ls</code> command, which looks like:</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/3bLZaNAsQ9-200.webp" alt="" loading="lazy" decoding="async" width="2207" height="468" srcset="https://ulfschneider.io/img/3bLZaNAsQ9-200.webp 200w, https://ulfschneider.io/img/3bLZaNAsQ9-2207.webp 2207w" sizes="100vw"> <figcaption>Output of <code>freeze --execute "ls -ls" -o freeze-ls-ls.png</code></figcaption> </figure> <p>You can get an image of a text file, like a <code>go.mod</code> file, as well. Issue the command</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">freeze go.mod <span class="token parameter variable">-o</span> freeze-go-mod.png</code></pre> <p>and get the following image:</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/lxLgYFILF1-200.webp" alt="" loading="lazy" decoding="async" width="2840" height="1744" srcset="https://ulfschneider.io/img/lxLgYFILF1-200.webp 200w, https://ulfschneider.io/img/lxLgYFILF1-2840.webp 2840w" sizes="100vw"> <figcaption>Output of <code>freeze go.mod -o freeze-go-mod.png</code></figcaption> </figure> <p>Because Freeze is written in Go, you can use it on any operating system.</p>

Freeze appeared on ulfschneider.io.

Reply via email

Adjust pointer size and pointer color on a Mac 2025-11-15T06:31:34Z https://ulfschneider.io/2025-11-15-pointer-color/ <p>I often struggle to spot the current mouse pointer location. By default the pointer is small and the white color does not have enough contrast. To help with that I change those settings on MacOS in the menu:</p> <p>System settings → Accessibility → Display → Pointer</p> <p>There it is possible to set size, border color and fill color for the pointer.</p>

Adjust pointer size and pointer color on a Mac appeared on ulfschneider.io.

Reply via email

One-time passcodes without JavaScript 2026-04-26T18:30:13Z https://ulfschneider.io/2025-11-12-simple-otps/ <p>Tyler Sticka shows how to do OTP's (one-time passcodes) in his article <a href="https://cloudfour.com/thinks/simple-one-time-passcode-inputs/"><cite>Simple One-Time Passcode Inputs</cite></a>. The key element is the <code>autocomplete="one-time-code"</code> setting on the <code>input</code> element, which adds support for autofill from password managers or via SMS. The other attributes make typing in the code more convenient and activate client-side input validation:</p> <pre class="language-html" data-language="HTML"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Verify Account<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Enter the 6-digit numeric code sent to +1 (555) 555-5555 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otp<span class="token punctuation">"</span></span> <span class="token attr-name">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one-time-code<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\d{6}<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Continue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Try another way… <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>One by one:</p> <dl> <dt><code>type="text"</code></dt> <dd>OTP's appear as a number, but a six digit <code>000004</code> is not the a countable number, but a sequence of 6 digits, therefore the OTP is treated as text</dd> <dt><code>inputmode="numeric"</code></dt> <dd>enable the numeric virtual keyboard on touch devices</dd> <dt><code>autocomplete="one-time-code"</code></dt> <dd>this add's support for <a href="https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/">autofill</a> from password managers or via <a href="https://web.dev/articles/sms-otp-form">SMS</a></dd> <dt><code>maxlength="6"</code></dt> <dd>prevent users putting in more than 6 digits</dd> <dt><code>pattern="\d{6}"</code></dt> <dd>we want 6 digits, and no other values</dd> <dt><code>required</code></dt> <dd>make the field mandatory</dd> </dl>

One-time passcodes without JavaScript appeared on ulfschneider.io.

Reply via email

SmoothCSV 2026-04-26T18:30:13Z https://ulfschneider.io/2025-10-17-smoothcsv/ <p>A cross-platform editor for <code>.csv</code> files</p> <p>This feels like Markdown for spreadsheets: <a href="https://smoothcsv.com"><cite>SmoothCSV</cite></a> is a cross-platform app made by <a href="https://github.com/kohii">kohii</a>, which allows to comfortably edit <code>.csv</code> files.</p> <p><code>.csv</code> files are text files that can be created, read, and shared with any tool capable of handling text. SmoothCSV can pick up and create <code>.csv</code> files with a comprehensive editing experience – on Mac and Windows. SmoothCSV is fast, probably because it's written in Rust. kohii explains how he created the tool in his dev.to article <a href="https://dev.to/kohii/the-technology-behind-smoothcsv-the-ultimate-csv-editor-3lg0"><cite>The Technology Behind SmoothCSV - The Ultimate CSV Editor</cite></a>.</p>

SmoothCSV appeared on ulfschneider.io.

Reply via email

Build possibility 2026-01-07T09:27:10Z https://ulfschneider.io/2025-10-17-build-possibility/ <blockquote> <p>Buy stability. Build possibility.</p> <footer>Ben Werdmüller, <a href="https://werd.io/build-what-makes-you-special-buy-the-rest/"><cite>Build what makes you special. Buy the rest.</cite></a></footer> </blockquote> <p>This sounds true! When deciding to buy or to build a software solution, build what makes you special, what differentiates you.</p> <blockquote> <p>Getting your build vs buy balance right is how you achieve table stakes: stable infrastructure, reliable publishing, sustainable engineering. But that sets you up for <em>today</em>. In order for any business to future-proof itself, it needs to make a bet on what the future will look like and build for <em>that</em>.</p> <footer>Ben Werdmüller</footer> </blockquote>

Build possibility appeared on ulfschneider.io.

Reply via email

Plex 2026-04-26T18:30:13Z https://ulfschneider.io/tools/plex/ <p>The iA Presenter theme based on the IBM Plex® typeface</p> <figure> <img src="https://ulfschneider.io/img/J-TDPU_FNh-200.webp" alt="" loading="lazy" decoding="async" width="2400" height="1452" srcset="https://ulfschneider.io/img/J-TDPU_FNh-200.webp 200w, https://ulfschneider.io/img/J-TDPU_FNh-2400.webp 2400w" sizes="100vw"> <figcaption>Plex is a custom theme for iA Presenter</figcaption> </figure> <p><a href="https://ia.net/presenter">iA Presenter</a> is my favorite software for writing and presenting a <em>story</em>. Presenter comes with a set of themes to provide a suitable visual style for your message. You can add your own <em>custom themes</em> to fit the tool even better to your needs. That's what I did with Plex: It is a custom iA Presenter theme based on the IBM Plex® typeface with vibrant dynamic background colors.</p> <p>See it here: <a href="https://ulfschneider.io/assets/plex/"><strong>Plex in action</strong></a>!</p> <p>Download Plex at <a href="https://github.com/ulfschneider/plex"><cite>github.com/ulfschneider/plex</cite></a>.</p> <p>Tell your story.</p>

Plex appeared on ulfschneider.io.

Reply via email

fork . 2026-04-26T18:30:13Z https://ulfschneider.io/2025-10-15-fork-from-the-terminal/ <p>When you are in the Terminal on a Mac inside of a Git repository, and you use the <a href="https://git-fork.com">Fork Git client</a>, it's perfectly doable to open the current repo in Fork by issuing the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">fork <span class="token builtin class-name">.</span></code></pre> <p>As a one-time prerequisite, install the Fork Command Line Tools from the Fork menu bar by navigating to Fork → Install Command Line Tools.</p> <p>From any folder within the terminal, to open the current folder in the Finder, issue the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token function">open</span> <span class="token builtin class-name">.</span></code></pre>

fork . appeared on ulfschneider.io.

Reply via email

Pure Paste 2025-10-01T05:46:15Z https://ulfschneider.io/2025-10-01-pure-paste/ <p>The tiny <em>Sindre Sorhus-style</em> app <a href="https://sindresorhus.com/pure-paste"><cite>Pure Paste</cite></a> sits in the menu bar and clears the formatting of text pasted from the clipboard.</p> <p>For example, you can paste text into an email and avoid polluting your message with the source formatting. That makes a lot of sense to me and is probably useful in any text-authoring situation.</p> <p>The app can do even more clever things when pasting. From the following list of options I have activated the ones marked with (on):</p> <ul> <li>Preserve links</li> <li>Remove tracking parameters from URLs (on)</li> <li>Trim leading and trailing whitespace</li> <li>Normalize quotes (on)</li> <li>Normalize newlines (on)</li> <li>Normalize unordered lists (on)</li> <li>Remove invisible characters (on)</li> <li>Remove footnote references (on)</li> <li>Remove mailto: prefix from email addresses (on)</li> </ul>

Pure Paste appeared on ulfschneider.io.

Reply via email

Unknown at rules with Tailwind CSS in Zed 2025-09-27T16:29:36Z https://ulfschneider.io/2025-09-25-unknown-at-rule/ <p>My Zed editor was complaining about unknown at rules (like <code>@apply</code>) when using Tailwind CSS.</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/1UJeejr0hJ-200.webp" alt="" loading="lazy" decoding="async" width="1516" height="214" srcset="https://ulfschneider.io/img/1UJeejr0hJ-200.webp 200w, https://ulfschneider.io/img/1UJeejr0hJ-1516.webp 1516w" sizes="100vw"> <figcaption>Unknown at rule @apply</figcaption> </figure> <p>You can solve this issue by adding the following lines to your Zed <code>settings.json</code>:</p> <pre class="language-json" data-language="JSON"><code class="language-json"><span class="token property">"languages"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"CSS"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"language_servers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"tailwindcss-language-server"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></code></pre>

Unknown at rules with Tailwind CSS in Zed appeared on ulfschneider.io.

Reply via email

Riding with the RMC 2025-09-24T15:54:54Z https://ulfschneider.io/2025-09-18-riding-with-the-rmc/ <figure> <video controls=""> <source src="https://ulfschneider.io/assets/2025-09-18-riding-with-the-rmc.mp4" type="video/mp4"> </video> <figcaption>The high season of bike riding is ending. Yesterday, the RMC Schloss Neuhaus held its regular training session. Though I ride at the RTB in Borchen, the RMC welcomes guest riders, and we know each other from biking events, therefore I took a chance for a pleasant ride in the beautiful landscape with great company. </figcaption> </figure>

Riding with the RMC appeared on ulfschneider.io.

Reply via email

Remove the pedals 2025-09-06T07:03:31Z https://ulfschneider.io/2025-09-06-remove-pedals/ <figure> <iframe width="560" height="315" src="https://www.youtube.com/embed/t42lXHGtUp4?si=5NuRlWjjy-mEkghQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" style="aspect-ratio:560/315; max-width:100%; height:auto; width:65ch;"></iframe> <figcaption> If you’ve ever wondered what the correct thread direction is to remove a pedal from a crank arm, this video is for you! Excellent practical advice. <a href="https://youtu.be/t42lXHGtUp4?si=ym0KYXjHmcLWloEb">Get it right every time</a>.</figcaption> </figure>

Remove the pedals appeared on ulfschneider.io.

Reply via email

Tuesday evening 2025-09-05T05:56:47Z https://ulfschneider.io/2025-09-05-tuesday-training-ride/ <p>My cycling club’s Tuesday training ride was exceptional this week. The beautiful light, mild temperature, and inspiring comrades made it unforgettable. We will meet again on Sunday, for the <a href="https://www.komoot.com/de-de/collection/3731022/-herbst-rtf-die-maehdreschertour-2025">Mähdrescher Tour</a>, organized by the RSG Harsewinkel.</p> <figure> <img src="https://ulfschneider.io/img/sKVdPytZNf-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/sKVdPytZNf-200.webp 200w, https://ulfschneider.io/img/sKVdPytZNf-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/GWFUuuWgTL-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/GWFUuuWgTL-200.webp 200w, https://ulfschneider.io/img/GWFUuuWgTL-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/3DY144ABbE-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/3DY144ABbE-200.webp 200w, https://ulfschneider.io/img/3DY144ABbE-1200.webp 1200w" sizes="100vw"> </figure>

Tuesday evening appeared on ulfschneider.io.

Reply via email

Tools for Designers 2025-08-26T06:06:03Z https://ulfschneider.io/2025-08-26-tools-for-designers/ <p><a href="https://www.learnui.design/tools/"><cite>Tools for Designers</cite></a> provides great (and free) tools to help with colors and web typography:</p> <ul> <li><a href="https://www.learnui.design/tools/gradient-generator.html">Gradient Generator</a></li> <li><a href="https://www.learnui.design/tools/mesh-gradient-generator.html">Mesh Gradient Generator</a></li> <li><a href="https://www.learnui.design/tools/data-color-picker.html">Data Visualization Color Picker</a></li> <li><a href="https://www.learnui.design/tools/accessible-color-generator.html">Accessible Color Generator</a></li> <li><a href="https://www.learnui.design/tools/typography-tutorial.html">Interactive Typography Tutorial</a></li> </ul>

Tools for Designers appeared on ulfschneider.io.

Reply via email

An official logo for CSS 2025-08-28T05:03:32Z https://ulfschneider.io/2025-08-26-css-logo/ <p>CSS, the <em>awesome</em> language that controls how HTML looks in the browser, <a href="https://github.com/CSS-Next/logo.css">has a new logo</a> . The background is <code>rebeccapurple</code>, which I find a <a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/">beautiful color choice</a>.</p> <p>At some point there was the idea by Amit Sheen to spill the CSS text <a href="https://www.ondrejkonecny.com/blog/kind-of-rebeccapurple/">slightly out of the framing container</a>, which, as a nod to <a href="https://css-tricks.com/css-is-awesome/">CSS is Awesome</a>, I liked even more. It seems the participants of the discussion disliked the association of CSS with something unpredictable and chaotic, so they refrained from going into that direction. Unfortunately. Here is the <a href="https://github.com/CSS-Next/css-next/issues/105">discussion thread</a>.</p> <figure class="max-w-sm"> <picture><source type="image/webp" srcset="https://ulfschneider.io/img/q5hl2Gyv4G-200.webp 200w, https://ulfschneider.io/img/q5hl2Gyv4G-1000.webp 1000w" sizes="100vw"><img alt="" loading="lazy" decoding="async" src="https://ulfschneider.io/img/q5hl2Gyv4G-1000.svg" width="1000" height="1000"></picture> <figcaption>The official CSS logo</figcaption> </figure>

An official logo for CSS appeared on ulfschneider.io.

Reply via email

Color Lisa 2025-08-26T06:11:27Z https://ulfschneider.io/2025-08-26-color-lisa/ <blockquote> <p><a href="https://colorlisa.com"><cite>colorlisa.com</cite></a> is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed designers, artists, museum curators, and masters of color theory. Palettes are constantly being added to help keep your designs colorful and fresh.</p> <footer><a href="https://www.mcguiremade.com">Ryan McGuire</a>, community artist and creator of Color Lisa</footer></blockquote>

Color Lisa appeared on ulfschneider.io.

Reply via email

Lidl Deutschland Tour – Course Festival in Borchen 2025-08-22T05:11:35Z https://ulfschneider.io/2025-08-22-deutschland-tour-borchen/ <figure> <img src="https://ulfschneider.io/img/ZYxgkZCIg8-200.webp" alt="" loading="lazy" decoding="async" width="1754" height="2480" srcset="https://ulfschneider.io/img/ZYxgkZCIg8-200.webp 200w, https://ulfschneider.io/img/ZYxgkZCIg8-1754.webp 1754w" sizes="100vw"> <figcaption>The Lidl Deutschland Tour passes through Borchen today. On this occasion, the Rad-Treff Borchen is hosting a course festival with delicious food and drinks at the parish hall in Borchen, right next to the route. Come, have a good time and see the racers passing by. More information on the <a href="https://rad-treff-borchen.de/deutschland-tour-streckenfest/">Rad-Treff Borchen</a> website and on <a href="https://www.deutschland-tour.com/">deutschland-tour.com</a> </figcaption> </figure>

Lidl Deutschland Tour – Course Festival in Borchen appeared on ulfschneider.io.

Reply via email

Text-to-Chart 2026-04-26T18:30:13Z https://ulfschneider.io/2025-08-16-text-to-chart/ <p><em>Text-to-chart</em> is the process of describing a diagram in text form, and letting software render the actual output. I've been investigating the topic by examining <a href="https://mermaid.js.org">Mermaid</a>, a free software library created in 2014 by Knut Sveidqvist with a focus on <em>development related charts</em>, and <a href="https://echarts.apache.org/">ECharts</a>, a flexible general-purpose diagramming solution that follows the <em>code-to-chart</em> approach. Unlike Mermaid, which uses a domain-specific language, ECharts is relying on JavaScript to describe the diagrams it renders.</p> <p>Along the way I couldn't resist to write two markdown-it plugins, allowing to integrate the charting solutions into your <a href="https://daringfireball.net/projects/markdown/syntax">Markdown</a> writing:</p> <ul> <li><a href="https://www.npmjs.com/package/markdown-it-mermaid-server">markdown-it-mermaid-server</a>, and</li> <li><a href="https://www.npmjs.com/package/markdown-it-responsive-echarts">markdown-it-responsive-echarts</a>.</li> </ul> <p>This document is my current state of learning the topic. All example charts are rendered by the mentioned plugins.</p> <div class="table-of-contents"><ol><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#text-to-chart%2C-what-is-it-good-for%3F">Text-to-chart, what is it good for?</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#could-there-be-problems%3F">Could there be problems?</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid">Mermaid</a><ol><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-flowchart">Mermaid Flowchart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-radar-chart">Mermaid Radar Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-sankey-chart">Mermaid Sankey Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-pie-chart">Mermaid Pie Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-xy-chart">Mermaid XY Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-chart-appearance">Mermaid Chart Appearance</a></li></ol></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts">ECharts</a><ol><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-pie-chart">ECharts Pie Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-xy-chart">ECharts XY Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-radar-chart">ECharts Radar Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-sankey-chart">ECharts Sankey Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-large-area-chart">ECharts Large Area Chart</a></li></ol></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#conclusion">Conclusion</a></li></ol></div> <h2 id="text-to-chart%2C-what-is-it-good-for%3F" tabindex="-1">Text-to-chart, what is it good for?</h2> <p>The idea of creating charts from text is appealing to me since I got aware of Mermaid several years ago. When creating output for the web by writing Markdown, text-to-chart has similar advantages as <a href="https://daringfireball.net/projects/markdown/syntax">Markdown</a>.</p> <ul> <li><strong>Use your environment</strong>: Write chart definitions with any text editor, which means, you can stay in your familiar writing environment without installing additional software to create the charts.</li> <li><strong>Quick</strong>: Save time because your focus is on data, content and writing, and not on formatting. It's important to mention, the time-saving aspect is only achieved if the text-to-chart software suits your context in terms of syntax and available diagram types!</li> <li><strong>Ideal web output</strong>: The charts can be created in a web-friendly output format – in the case of Mermaid it can be SVG, PNG or PDF. SVG, I believe, is a good starting point for charts on the web, because it is lightweight and scales well up and down.</li> <li><strong>Standardized output</strong>: The resulting charts have a standardized appearance and can be themed to a certain look, which means you can fit the charts into your design language. This again might help to improve shared understanding in collaborative contexts, because even with multiple people creating charts, the charts are rendered by the same rules and thus create a kind of a shared language.</li> <li><strong>Up-to-date charts</strong>: The possibility of quick text-based changes leading to optimal output rendering helps to avoid what the Mermaid creator Knut Sveidqvist calls <em>doc-rot,</em> the gap between a current development state and the outdated diagram documentation aiming to describe that state. This gives a hint that Mermaid has a tendency to provide diagrams that fit well into the software development domain, like flowcharts or sequence diagrams. Other text-to-chart software can have a different focus and produce different diagram types with the same general advantages for your workflow. The benefit of always having up-to-date charts published in the correct standardized look on even a large website is huge, in my view.</li> <li><strong>Version control</strong>: The chart definitions are made of text and as such can be versioned in an excellent way by Git.</li> <li><strong>Fast and lightweight delivery</strong>: Sometimes the charts can be rendered as part of the build process of a static website on the server, which means users get the charts as quick and as lean as possible delivered to their web browsers, without the need to run JavaScript on the browser. This can be done with Mermaid and it makes sense in that case, because Mermaid charts do not offer options for interactive changes.</li> <li><strong>Interaction</strong>: When the charts are rendered by JavaScript on the browser client, as opposed to the server, you can have other advantages, like interactive charts, allowing to filter out certain visualization aspects to analyze the data. ECharts delivers charts this way.</li> </ul> <h2 id="could-there-be-problems%3F" tabindex="-1">Could there be problems?</h2> <p>There can be downsides.</p> <ul> <li><strong>Syntax</strong>: The syntax of text-to-chart, in this case the Mermaid-syntax, as simple as the maintainers are aiming to keep it, takes time to learn. I sometimes have to visit the Mermaid website to understand how to achieve certain results. Same comes true with code-to-chart in ECharts. There are certain building blocks which appear repeatedly, which helps a lot getting into the concepts, but the resulting charts can cover such a wide range of visualization variants that it's natural the code handling requires learning.</li> <li><strong>Feedback loop</strong>: When rendering the charts within the build process of a static website, the feedback cycle to see what chart is getting produced by processing your textual definition is slowed down, because every change of the chart definition requires a build step to get the chart results. To overcome this problem, Mermaid has a free online editor <a href="https://mermaid.live/">mermaid.live</a> which you can use to set up diagrams and see immediately how your chart does look like. Once you have your desired result, you can copy your chart definition and paste it into the final location. ECharts is the same. Their online editor is <a href="https://echarts.apache.org/examples/editor.html">echarts.apache.org/examples/editor.html</a>.</li> <li><strong>Software complexity</strong>: Generating charts at build time or at run time is more complex than creating an image once and referencing that image in your website. You can be sure a web browser is able to visualize a .png image or a .jpg image 20 years into the future without the need for you to ever touch it. Generating charts on the other hand will touch your chart definition with every build or with every page view and will carry out computational tasks to translate your text into a graphic. Sure there are chances something might break and your users will end up seeing no chart at all. You have to have your software stack under control to keep this in a working state.</li> </ul> <h2 id="mermaid" tabindex="-1">Mermaid</h2> <p>Mermaid has its roots in creating <em>development charts</em> from text, like flowcharts, sequence diagrams, and state diagrams. The mind map chart can as well be seen to be in this domain. A strength of Mermaid is the lean syntax for describing the charts, and Sveidqvist's intent to fight doc-rot is well addressed in my view. There are good ideas in Mermaid, but the actual execution could be more standardized. The different chart types sometimes appear to me as not generated by the same software but by different software stacks.</p> <p>Mermaid supports class diagrams, but generating them directly from your code base with a different software might be more effective.</p> <h3 id="mermaid-flowchart" tabindex="-1">Mermaid Flowchart</h3> <p>You can create a flowchart by adding a few lines of text to your Markdown document, like below:</p> <pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">flowchart LR start --> decision decision --> optionA & optionB start(["Start"]) decision{"Decision"} optionA["Option A"] optionB["Option B"]</span> <span class="token punctuation">```</span></span></code></pre> <p>The above chart definition will produce the following diagram, and the simplicity of the creation is a source of joy to me.</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-uhqdhxrvcugw" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 431.4174499511719px;" viewBox="0.0000019073486328125 0 431.4174499511719 174" role="graphics-document document" aria-roledescription="flowchart-v2" aria-label="A flowchart starting at a node &quot;Start&quot;, flowing to a decision point &quot;Decision&quot;, from where the flow can go further to either node &quot;Option A&quot; or &quot;Option B&quot;"><style>#mermaid-uhqdhxrvcugw{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-uhqdhxrvcugw .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-uhqdhxrvcugw .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-uhqdhxrvcugw .error-icon{fill:#552222;}#mermaid-uhqdhxrvcugw .error-text{fill:#552222;stroke:#552222;}#mermaid-uhqdhxrvcugw .edge-thickness-normal{stroke-width:1px;}#mermaid-uhqdhxrvcugw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-uhqdhxrvcugw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-uhqdhxrvcugw .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-uhqdhxrvcugw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-uhqdhxrvcugw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-uhqdhxrvcugw .marker{fill:#333333;stroke:#333333;}#mermaid-uhqdhxrvcugw .marker.cross{stroke:#333333;}#mermaid-uhqdhxrvcugw svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-uhqdhxrvcugw p{margin:0;}#mermaid-uhqdhxrvcugw .label{font-family:arial,sans-serif;color:#333;}#mermaid-uhqdhxrvcugw .cluster-label text{fill:#333;}#mermaid-uhqdhxrvcugw .cluster-label span{color:#333;}#mermaid-uhqdhxrvcugw .cluster-label span p{background-color:transparent;}#mermaid-uhqdhxrvcugw .label text,#mermaid-uhqdhxrvcugw span{fill:#333;color:#333;}#mermaid-uhqdhxrvcugw .node rect,#mermaid-uhqdhxrvcugw .node circle,#mermaid-uhqdhxrvcugw .node ellipse,#mermaid-uhqdhxrvcugw .node polygon,#mermaid-uhqdhxrvcugw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-uhqdhxrvcugw .rough-node .label text,#mermaid-uhqdhxrvcugw .node .label text,#mermaid-uhqdhxrvcugw .image-shape .label,#mermaid-uhqdhxrvcugw .icon-shape .label{text-anchor:middle;}#mermaid-uhqdhxrvcugw .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-uhqdhxrvcugw .rough-node .label,#mermaid-uhqdhxrvcugw .node .label,#mermaid-uhqdhxrvcugw .image-shape .label,#mermaid-uhqdhxrvcugw .icon-shape .label{text-align:center;}#mermaid-uhqdhxrvcugw .node.clickable{cursor:pointer;}#mermaid-uhqdhxrvcugw .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-uhqdhxrvcugw .arrowheadPath{fill:#333333;}#mermaid-uhqdhxrvcugw .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-uhqdhxrvcugw .flowchart-link{stroke:#333333;fill:none;}#mermaid-uhqdhxrvcugw .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-uhqdhxrvcugw .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-uhqdhxrvcugw .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-uhqdhxrvcugw .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-uhqdhxrvcugw .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-uhqdhxrvcugw .cluster text{fill:#333;}#mermaid-uhqdhxrvcugw .cluster span{color:#333;}#mermaid-uhqdhxrvcugw div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-uhqdhxrvcugw .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-uhqdhxrvcugw rect.text{fill:none;stroke-width:0;}#mermaid-uhqdhxrvcugw .icon-shape,#mermaid-uhqdhxrvcugw .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-uhqdhxrvcugw .icon-shape p,#mermaid-uhqdhxrvcugw .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-uhqdhxrvcugw .icon-shape .label rect,#mermaid-uhqdhxrvcugw .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-uhqdhxrvcugw .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-uhqdhxrvcugw .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-uhqdhxrvcugw :root{--mermaid-font-family:arial,sans-serif;}</style><g><marker id="mermaid-uhqdhxrvcugw_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-uhqdhxrvcugw_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-uhqdhxrvcugw_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="mermaid-uhqdhxrvcugw_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="mermaid-uhqdhxrvcugw_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-uhqdhxrvcugw_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M72.324,87.5L76.407,87.417C80.49,87.333,88.657,87.167,96.24,87.083C103.824,87,110.824,87,114.324,87L117.824,87" id="L_start_decision_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_start_decision_0" data-points="W3sieCI6NzIuMzIzNzEyNDMxODI2NzksInkiOjg3LjV9LHsieCI6OTYuODIzNzExMzk1MjYzNjcsInkiOjg3fSx7IngiOjEyMS44MjM3MTEzOTUyNjM2NywieSI6ODd9XQ==" marker-end="url(#mermaid-uhqdhxrvcugw_flowchart-v2-pointEnd)"></path><path d="M220.95,64.001L228.95,59.168C236.95,54.334,252.949,44.667,264.452,39.834C275.954,35,282.959,35,286.462,35L289.964,35" id="L_decision_optionA_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_decision_optionA_0" data-points="W3sieCI6MjIwLjk1MDA2OTQ3NTg0MzEyLCJ5Ijo2NC4wMDEzNTgwODA1Nzk0NX0seyJ4IjoyNjguOTQ4NzExMzk1MjYzNywieSI6MzV9LHsieCI6MjkzLjk2NDMzNjM5NTI2MzcsInkiOjM1fV0=" marker-end="url(#mermaid-uhqdhxrvcugw_flowchart-v2-pointEnd)"></path><path d="M220.95,109.999L228.95,114.832C236.95,119.666,252.949,129.333,264.449,134.166C275.949,139,282.949,139,286.449,139L289.949,139" id="L_decision_optionB_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_decision_optionB_0" data-points="W3sieCI6MjIwLjk1MDA2OTQ3NTg0MzEyLCJ5IjoxMDkuOTk4NjQxOTE5NDIwNTV9LHsieCI6MjY4Ljk0ODcxMTM5NTI2MzcsInkiOjEzOX0seyJ4IjoyOTMuOTQ4NzExMzk1MjYzNywieSI6MTM5fV0=" marker-end="url(#mermaid-uhqdhxrvcugw_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_start_decision_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_decision_optionA_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_decision_optionB_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-start-0" transform="translate(39.911855697631836, 87)"><g class="basic label-container outer-path"><path d="M-12.421875 -19.5 C-5.763310271054353 -19.5, 0.8952544578912942 -19.5, 12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 C12.871533909002489 -19.485580313996262, 13.32119281800498 -19.47116062799252, 13.6712442896239 -19.45993515863156 C13.93414271353613 -19.43457366385836, 14.197041137448357 -19.409212169085162, 14.915479652847864 -19.3399052695533 C15.238944566544879 -19.287609970814636, 15.562409480241893 -19.235314672075976, 16.14946825967676 -19.140403561325776 C16.435924849974512 -19.07502171389426, 16.72238144027227 -19.009639866462745, 17.36813938623539 -18.862249829261074 C17.619068640158428 -18.787775343851248, 17.869997894081465 -18.713300858441425, 18.566485251460602 -18.50658706670804 C18.880736488033662 -18.390939706742564, 19.194987724606722 -18.275292346777093, 19.739581595147794 -18.074876768247425 C19.991791838232952 -17.963230775184666, 20.244002081318108 -17.851584782121908, 20.88260791279238 -17.568892924097174 C21.189503904557068 -17.4087854817698, 21.49639989632176 -17.248678039442428, 21.990867264076783 -16.990714730406097 C22.40189687652586 -16.741546163861347, 22.812926488974938 -16.4923775973166, 23.059805573605697 -16.342718045390892 C23.379928688771077 -16.11941401815783, 23.700051803936457 -15.896109990924765, 24.085030344578712 -15.627565626425154 C24.356953091325884 -15.410714472062475, 24.628875838073057 -15.193863317699796, 25.06232870850187 -14.848196188198123 C25.374844875520058 -14.564377274036872, 25.687361042538246 -14.28055835987562, 25.987684736767985 -14.007812326905688 C26.23448625603866 -13.752969495477146, 26.481287775309337 -13.498126664048602, 26.857295942968648 -13.10986736009568 C27.169667175904898 -12.742938335462082, 27.48203840884115 -12.376009310828481, 27.667588908126582 -12.158051136245305 C27.87230294503615 -11.883752976618911, 28.077016981945714 -11.609454816992516, 28.415233964640635 -11.156274872382312 C28.588386939121087 -10.890265405496347, 28.761539913601535 -10.624255938610382, 29.097158878604247 -10.108655082055241 C29.252659992512143 -9.832547108116533, 29.40816110642004 -9.556439134177822, 29.7105614742735 -9.019496659696287 C29.88164146915487 -8.664245389799632, 30.052721464036246 -8.308994119902977, 30.25292114880834 -7.893275190886684 C30.42379406496446 -7.471215784377977, 30.594666981120582 -7.04915637786927, 30.722009229970325 -6.734618561215508 C30.83678190701692 -6.388941544493889, 30.951554584063516 -6.043264527772271, 31.11589813421488 -5.548287939305138 C31.231840356772235 -5.106149995016832, 31.347782579329586 -4.664012050728525, 31.43296928754556 -4.339158212148133 C31.527052732395003 -3.85605960738936, 31.621136177244445 -3.3729610026305865, 31.671919776581777 -3.1121979531509023 C31.71495367800316 -2.7784355117316935, 31.75798757942454 -2.4446730703124846, 31.831767702509367 -1.872449005199798 C31.863399434459165 -1.3797592474072173, 31.895031166408963 -0.8870694896146368, 31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.21875959307038795, 31.911856215913414 0.1874865765064998, 31.911856215913414 0.625005762647271 C31.893249999381148 0.9148126038049691, 31.874643782848885 1.2046194449626673, 31.831767702509367 1.8724490051997846 C31.76979672307642 2.3530836841276694, 31.707825743643472 2.833718363055554, 31.671919776581777 3.1121979531508885 C31.594870843952673 3.5078279379036625, 31.51782191132357 3.9034579226564365, 31.43296928754556 4.339158212148129 C31.331227702111264 4.727142972491161, 31.229486116676966 5.115127732834193, 31.115898134214884 5.548287939305125 C30.965944325881747 5.999924918109765, 30.815990517548606 6.451561896914404, 30.72200922997033 6.734618561215495 C30.596531066176635 7.044552051741183, 30.47105290238294 7.354485542266873, 30.252921148808344 7.893275190886679 C30.14259716706905 8.122365299523386, 30.03227318532975 8.351455408160092, 29.710561474273504 9.019496659696284 C29.536734485322608 9.328144080469915, 29.36290749637171 9.636791501243547, 29.09715887860425 10.108655082055236 C28.881994409878896 10.439205485767161, 28.66682994115354 10.769755889479086, 28.41523396464064 11.156274872382301 C28.223809561198102 11.412766133873392, 28.032385157755566 11.669257395364482, 27.667588908126582 12.158051136245302 C27.481498810096948 12.376643154217458, 27.29540871206731 12.595235172189614, 26.85729594296866 13.10986736009567 C26.672843749322578 13.300329393841984, 26.488391555676493 13.490791427588299, 25.98768473676799 14.007812326905684 C25.76418755407176 14.210786554818991, 25.54069037137553 14.413760782732298, 25.062328708501887 14.848196188198111 C24.795184634783922 15.06123647798583, 24.528040561065954 15.274276767773546, 24.085030344578715 15.627565626425152 C23.81566105024223 15.815465985345472, 23.54629175590574 16.003366344265793, 23.059805573605708 16.34271804539089 C22.741412630387856 16.53572971865417, 22.423019687170004 16.728741391917456, 21.990867264076787 16.990714730406093 C21.60235704207342 17.193400264372574, 21.213846820070053 17.396085798339058, 20.882607912792388 17.56889292409717 C20.448511567803653 17.76105449901313, 20.01441522281492 17.953216073929088, 19.739581595147804 18.07487676824742 C19.270429596166444 18.247529040666098, 18.801277597185084 18.42018131308478, 18.566485251460616 18.506587066708033 C18.180251039706512 18.621219353371902, 17.794016827952404 18.735851640035776, 17.368139386235413 18.86224982926107 C16.894317852798917 18.970396502293486, 16.42049631936242 19.078543175325898, 16.149468259676766 19.140403561325773 C15.838857476007444 19.190620704006825, 15.528246692338124 19.240837846687878, 14.915479652847878 19.3399052695533 C14.453492090459395 19.38447265407558, 13.991504528070912 19.429040038597865, 13.6712442896239 19.45993515863156 C13.366295132900609 19.46971428454015, 13.061345976177318 19.47949341044874, 12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875000000002 19.5, 12.421875 19.5 C6.541491582385115 19.5, 0.6611081647702299 19.5, -12.421874999999996 19.5 C-12.702400282274022 19.49100410020681, -12.982925564548047 19.48200820041362, -13.671244289623893 19.45993515863156 C-13.998460322649402 19.428369021460444, -14.32567635567491 19.39680288428933, -14.915479652847871 19.3399052695533 C-15.204432904629952 19.293189548671105, -15.493386156412033 19.246473827788915, -16.14946825967676 19.140403561325773 C-16.467251430362648 19.067871626345706, -16.785034601048537 18.995339691365643, -17.368139386235388 18.862249829261074 C-17.76280532397698 18.745115050583152, -18.157471261718573 18.62798027190523, -18.56648525146059 18.506587066708043 C-18.88851919602268 18.38807559826004, -19.210553140584775 18.269564129812043, -19.739581595147797 18.074876768247425 C-20.039344922672118 17.942180435315578, -20.33910825019644 17.809484102383735, -20.88260791279238 17.568892924097174 C-21.248679508233174 17.377913607235758, -21.614751103673967 17.186934290374346, -21.99086726407678 16.990714730406097 C-22.296997594972833 16.805136724795396, -22.603127925868886 16.619558719184695, -23.059805573605686 16.3427180453909 C-23.335913909999988 16.150116822459477, -23.61202224639429 15.957515599528056, -24.085030344578712 15.627565626425156 C-24.353743570287673 15.413273979681508, -24.622456795996634 15.19898233293786, -25.06232870850187 14.848196188198125 C-25.42588604825955 14.518023031430292, -25.789443388017233 14.18784987466246, -25.987684736767974 14.007812326905697 C-26.2926355460532 13.692925579391634, -26.597586355338432 13.378038831877571, -26.857295942968655 13.109867360095677 C-27.0744060385801 12.854837487876063, -27.291516134191543 12.599807615656449, -27.66758890812658 12.158051136245307 C-27.933920486042446 11.80119108514394, -28.20025206395831 11.444331034042571, -28.415233964640635 11.156274872382316 C-28.668900229556197 10.766575370542336, -28.922566494471756 10.376875868702355, -29.097158878604244 10.108655082055249 C-29.241708674591813 9.85199228202527, -29.386258470579378 9.595329481995291, -29.7105614742735 9.019496659696289 C-29.856071446620845 8.717342088702377, -30.00158141896819 8.415187517708466, -30.25292114880834 7.893275190886686 C-30.4060819959936 7.514964937175564, -30.559242843178858 7.1366546834644415, -30.722009229970325 6.73461856121551 C-30.825543416765854 6.422790086519852, -30.92907760356138 6.110961611824194, -31.11589813421488 5.5482879393051325 C-31.23807995485971 5.082355703250362, -31.36026177550454 4.616423467195591, -31.432969287545557 4.339158212148136 C-31.510528463423352 3.9409082361532923, -31.588087639301147 3.542658260158449, -31.671919776581777 3.112197953150904 C-31.712838134687694 2.79484324792516, -31.75375649279361 2.477488542699416, -31.831767702509364 1.872449005199809 C-31.856442648228253 1.4881168083704153, -31.881117593947142 1.1037846115410215, -31.911856215913414 0.6250057626472781 C-31.911856215913414 0.2821758808400364, -31.911856215913414 -0.0606540009672053, -31.911856215913414 -0.6250057626472687 C-31.88056250692076 -1.1124305400350991, -31.849268797928108 -1.5998553174229297, -31.831767702509367 -1.8724490051997822 C-31.78506712484903 -2.234649463461227, -31.73836654718869 -2.5968499217226717, -31.671919776581777 -3.112197953150895 C-31.606401512031 -3.448620394329022, -31.540883247480224 -3.7850428355071486, -31.43296928754556 -4.339158212148126 C-31.331653020036622 -4.725521050907818, -31.23033675252768 -5.111883889667511, -31.115898134214884 -5.548287939305123 C-31.016049008774942 -5.849017596332551, -30.916199883334997 -6.14974725335998, -30.722009229970332 -6.734618561215485 C-30.60508911045449 -7.023413516916349, -30.488168990938647 -7.312208472617215, -30.252921148808344 -7.893275190886676 C-30.077701462264613 -8.257122619095433, -29.90248177572088 -8.62097004730419, -29.710561474273504 -9.019496659696282 C-29.48363541704572 -9.422426853059243, -29.256709359817933 -9.825357046422202, -29.097158878604247 -10.108655082055243 C-28.827647809029727 -10.522696458777183, -28.558136739455207 -10.936737835499125, -28.41523396464064 -11.156274872382308 C-28.211107572027508 -11.429785642186976, -28.006981179414378 -11.703296411991644, -27.667588908126586 -12.158051136245302 C-27.413470983928377 -12.456552509728029, -27.159353059730172 -12.755053883210756, -26.857295942968662 -13.10986736009567 C-26.616475663116194 -13.358534070756024, -26.375655383263723 -13.607200781416378, -25.987684736767996 -14.007812326905677 C-25.767246901656623 -14.208008136288317, -25.54680906654525 -14.408203945670959, -25.062328708501887 -14.848196188198107 C-24.68841152956317 -15.146385188047718, -24.314494350624447 -15.444574187897329, -24.08503034457872 -15.627565626425149 C-23.82567348017177 -15.80848174765773, -23.56631661576482 -15.989397868890313, -23.05980557360571 -16.342718045390885 C-22.74425967636102 -16.53400382265414, -22.42871377911633 -16.725289599917392, -21.99086726407679 -16.99071473040609 C-21.58163336350982 -17.204211794205055, -21.172399462942845 -17.417708858004023, -20.882607912792388 -17.56889292409717 C-20.600499330750917 -17.693774024913175, -20.318390748709447 -17.81865512572918, -19.739581595147804 -18.07487676824742 C-19.39586574471399 -18.201367378481557, -19.052149894280173 -18.327857988715692, -18.56648525146062 -18.506587066708033 C-18.2798081276674 -18.59167133225093, -17.993131003874183 -18.676755597793825, -17.368139386235413 -18.862249829261067 C-17.00500305112221 -18.94513332806461, -16.641866716009 -19.028016826868157, -16.149468259676766 -19.140403561325773 C-15.883158389278902 -19.18345847590781, -15.616848518881039 -19.226513390489846, -14.91547965284788 -19.3399052695533 C-14.514213854895804 -19.37861489848901, -14.11294805694373 -19.417324527424718, -13.671244289623903 -19.45993515863156 C-13.19774547686627 -19.475119343947167, -12.72424666410864 -19.490303529262775, -12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000004 -19.5, -12.421875 -19.5" stroke="none" stroke-width="0" fill="#ECECFF" style=""></path><path d="M-12.421875 -19.5 C-4.499331780648734 -19.5, 3.4232114387025323 -19.5, 12.421875 -19.5 M-12.421875 -19.5 C-6.586162650190524 -19.5, -0.7504503003810488 -19.5, 12.421875 -19.5 M12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 M12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 M12.421874999999998 -19.5 C12.824441746470937 -19.487090467989315, 13.227008492941875 -19.47418093597863, 13.6712442896239 -19.45993515863156 M12.421874999999998 -19.5 C12.80595316211838 -19.487683360903656, 13.190031324236761 -19.47536672180731, 13.6712442896239 -19.45993515863156 M13.6712442896239 -19.45993515863156 C14.027328659212193 -19.425584127751485, 14.383413028800486 -19.391233096871414, 14.915479652847864 -19.3399052695533 M13.6712442896239 -19.45993515863156 C13.941003819741828 -19.433911781194382, 14.210763349859757 -19.40788840375721, 14.915479652847864 -19.3399052695533 M14.915479652847864 -19.3399052695533 C15.405392793500317 -19.26069991230576, 15.895305934152768 -19.181494555058222, 16.14946825967676 -19.140403561325776 M14.915479652847864 -19.3399052695533 C15.295184404914462 -19.278517549893504, 15.67488915698106 -19.217129830233706, 16.14946825967676 -19.140403561325776 M16.14946825967676 -19.140403561325776 C16.421275567169328 -19.07836531709904, 16.6930828746619 -19.016327072872304, 17.36813938623539 -18.862249829261074 M16.14946825967676 -19.140403561325776 C16.513530643712006 -19.05730869789881, 16.877593027747253 -18.974213834471843, 17.36813938623539 -18.862249829261074 M17.36813938623539 -18.862249829261074 C17.679912691841455 -18.76971714868867, 17.991685997447522 -18.677184468116266, 18.566485251460602 -18.50658706670804 M17.36813938623539 -18.862249829261074 C17.7378066713124 -18.752534519473397, 18.107473956389402 -18.642819209685715, 18.566485251460602 -18.50658706670804 M18.566485251460602 -18.50658706670804 C18.889463867287542 -18.38772795050213, 19.212442483114483 -18.268868834296217, 19.739581595147794 -18.074876768247425 M18.566485251460602 -18.50658706670804 C18.954957582326305 -18.3636256579506, 19.343429913192008 -18.22066424919316, 19.739581595147794 -18.074876768247425 M19.739581595147794 -18.074876768247425 C20.071087927485824 -17.928128748707334, 20.402594259823857 -17.78138072916724, 20.88260791279238 -17.568892924097174 M19.739581595147794 -18.074876768247425 C20.02739474007747 -17.947470426660658, 20.315207885007144 -17.82006408507389, 20.88260791279238 -17.568892924097174 M20.88260791279238 -17.568892924097174 C21.21639791987304 -17.3947548912059, 21.550187926953697 -17.220616858314624, 21.990867264076783 -16.990714730406097 M20.88260791279238 -17.568892924097174 C21.262037000795647 -17.3709450119218, 21.64146608879891 -17.17299709974643, 21.990867264076783 -16.990714730406097 M21.990867264076783 -16.990714730406097 C22.225026464627145 -16.848766046960264, 22.459185665177504 -16.706817363514432, 23.059805573605697 -16.342718045390892 M21.990867264076783 -16.990714730406097 C22.227243288614666 -16.847422195231523, 22.463619313152552 -16.70412966005695, 23.059805573605697 -16.342718045390892 M23.059805573605697 -16.342718045390892 C23.438585159795693 -16.078497803168766, 23.817364745985685 -15.814277560946636, 24.085030344578712 -15.627565626425154 M23.059805573605697 -16.342718045390892 C23.44345599948526 -16.075100116256575, 23.82710642536482 -15.807482187122256, 24.085030344578712 -15.627565626425154 M24.085030344578712 -15.627565626425154 C24.313497568563236 -15.445369095065661, 24.541964792547756 -15.263172563706169, 25.06232870850187 -14.848196188198123 M24.085030344578712 -15.627565626425154 C24.41515580534072 -15.364299356474909, 24.74528126610273 -15.101033086524664, 25.06232870850187 -14.848196188198123 M25.06232870850187 -14.848196188198123 C25.351221325819623 -14.585831556829934, 25.640113943137376 -14.323466925461746, 25.987684736767985 -14.007812326905688 M25.06232870850187 -14.848196188198123 C25.33779673757196 -14.598023412681322, 25.61326476664205 -14.347850637164518, 25.987684736767985 -14.007812326905688 M25.987684736767985 -14.007812326905688 C26.2940724756998 -13.691441831557407, 26.60046021463161 -13.375071336209126, 26.857295942968648 -13.10986736009568 M25.987684736767985 -14.007812326905688 C26.207285657833708 -13.781056346334402, 26.426886578899435 -13.554300365763117, 26.857295942968648 -13.10986736009568 M26.857295942968648 -13.10986736009568 C27.02013719910859 -12.91858475470374, 27.182978455248527 -12.727302149311802, 27.667588908126582 -12.158051136245305 M26.857295942968648 -13.10986736009568 C27.17678954295278 -12.734571997853473, 27.496283142936914 -12.359276635611266, 27.667588908126582 -12.158051136245305 M27.667588908126582 -12.158051136245305 C27.872328721401214 -11.883718438637999, 28.077068534675846 -11.60938574103069, 28.415233964640635 -11.156274872382312 M27.667588908126582 -12.158051136245305 C27.865934652153097 -11.892285908918785, 28.06428039617961 -11.626520681592265, 28.415233964640635 -11.156274872382312 M28.415233964640635 -11.156274872382312 C28.596762430984896 -10.877398400859061, 28.778290897329157 -10.59852192933581, 29.097158878604247 -10.108655082055241 M28.415233964640635 -11.156274872382312 C28.564273568569067 -10.927310018010871, 28.713313172497504 -10.69834516363943, 29.097158878604247 -10.108655082055241 M29.097158878604247 -10.108655082055241 C29.317665561546985 -9.71712313776752, 29.538172244489722 -9.325591193479797, 29.7105614742735 -9.019496659696287 M29.097158878604247 -10.108655082055241 C29.250739663102763 -9.835956847437323, 29.40432044760128 -9.563258612819405, 29.7105614742735 -9.019496659696287 M29.7105614742735 -9.019496659696287 C29.88112879145182 -8.66530997601956, 30.051696108630146 -8.311123292342833, 30.25292114880834 -7.893275190886684 M29.7105614742735 -9.019496659696287 C29.905203034543295 -8.615319295133837, 30.09984459481309 -8.211141930571387, 30.25292114880834 -7.893275190886684 M30.25292114880834 -7.893275190886684 C30.39290363732264 -7.547515737879061, 30.532886125836942 -7.201756284871437, 30.722009229970325 -6.734618561215508 M30.25292114880834 -7.893275190886684 C30.43291469967155 -7.4486876403159945, 30.612908250534755 -7.004100089745304, 30.722009229970325 -6.734618561215508 M30.722009229970325 -6.734618561215508 C30.80328494605856 -6.489829053884525, 30.884560662146793 -6.245039546553541, 31.11589813421488 -5.548287939305138 M30.722009229970325 -6.734618561215508 C30.86609260187958 -6.300662401592582, 31.010175973788837 -5.8667062419696565, 31.11589813421488 -5.548287939305138 M31.11589813421488 -5.548287939305138 C31.222686209189046 -5.141058727184185, 31.32947428416321 -4.733829515063233, 31.43296928754556 -4.339158212148133 M31.11589813421488 -5.548287939305138 C31.182813603553797 -5.293110253367986, 31.249729072892713 -5.0379325674308335, 31.43296928754556 -4.339158212148133 M31.43296928754556 -4.339158212148133 C31.490518978873613 -4.043652710310145, 31.54806867020167 -3.748147208472156, 31.671919776581777 -3.1121979531509023 M31.43296928754556 -4.339158212148133 C31.4941298798831 -4.025111496790633, 31.55529047222064 -3.7110647814331346, 31.671919776581777 -3.1121979531509023 M31.671919776581777 -3.1121979531509023 C31.723742773341318 -2.710269023892112, 31.775565770100858 -2.308340094633322, 31.831767702509367 -1.872449005199798 M31.671919776581777 -3.1121979531509023 C31.731557856098398 -2.64965678529084, 31.791195935615022 -2.187115617430778, 31.831767702509367 -1.872449005199798 M31.831767702509367 -1.872449005199798 C31.852374059050394 -1.551488368921673, 31.87298041559142 -1.230527732643548, 31.911856215913414 -0.6250057626472757 M31.831767702509367 -1.872449005199798 C31.84830033616906 -1.61493989104837, 31.864832969828754 -1.3574307768969422, 31.911856215913414 -0.6250057626472757 M31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.15687761538427203, 31.911856215913414 0.31125053187873164, 31.911856215913414 0.625005762647271 M31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.25753810561891716, 31.911856215913414 0.10992955140944138, 31.911856215913414 0.625005762647271 M31.911856215913414 0.625005762647271 C31.882626109419608 1.0802882654055972, 31.853396002925802 1.5355707681639235, 31.831767702509367 1.8724490051997846 M31.911856215913414 0.625005762647271 C31.891239626723138 0.9461257806971015, 31.870623037532862 1.267245798746932, 31.831767702509367 1.8724490051997846 M31.831767702509367 1.8724490051997846 C31.784172034251835 2.241591609377437, 31.7365763659943 2.610734213555089, 31.671919776581777 3.1121979531508885 M31.831767702509367 1.8724490051997846 C31.798370130329747 2.1314739799283227, 31.76497255815013 2.3904989546568607, 31.671919776581777 3.1121979531508885 M31.671919776581777 3.1121979531508885 C31.597731177108002 3.493140731682683, 31.523542577634224 3.874083510214477, 31.43296928754556 4.339158212148129 M31.671919776581777 3.1121979531508885 C31.577712512163423 3.5959323452267595, 31.483505247745068 4.07966673730263, 31.43296928754556 4.339158212148129 M31.43296928754556 4.339158212148129 C31.334634298359454 4.714152144568659, 31.236299309173347 5.08914607698919, 31.115898134214884 5.548287939305125 M31.43296928754556 4.339158212148129 C31.306405825677892 4.821799545200903, 31.179842363810224 5.3044408782536765, 31.115898134214884 5.548287939305125 M31.115898134214884 5.548287939305125 C30.991573508156755 5.922733904553091, 30.86724888209862 6.297179869801058, 30.72200922997033 6.734618561215495 M31.115898134214884 5.548287939305125 C31.031693280156706 5.801899543506819, 30.94748842609853 6.055511147708513, 30.72200922997033 6.734618561215495 M30.72200922997033 6.734618561215495 C30.58343061342135 7.07691042332676, 30.44485199687237 7.4192022854380255, 30.252921148808344 7.893275190886679 M30.72200922997033 6.734618561215495 C30.569934177907797 7.110246879981062, 30.417859125845265 7.48587519874663, 30.252921148808344 7.893275190886679 M30.252921148808344 7.893275190886679 C30.093334167179968 8.224660972852398, 29.933747185551592 8.556046754818116, 29.710561474273504 9.019496659696284 M30.252921148808344 7.893275190886679 C30.116625130810945 8.176296788525883, 29.98032911281355 8.459318386165087, 29.710561474273504 9.019496659696284 M29.710561474273504 9.019496659696284 C29.486769993657777 9.416861094874228, 29.262978513042054 9.814225530052171, 29.09715887860425 10.108655082055236 M29.710561474273504 9.019496659696284 C29.54497449310464 9.313513112261647, 29.37938751193578 9.607529564827013, 29.09715887860425 10.108655082055236 M29.09715887860425 10.108655082055236 C28.874675308186518 10.450449591420647, 28.652191737768785 10.792244100786057, 28.41523396464064 11.156274872382301 M29.09715887860425 10.108655082055236 C28.867145654742444 10.462017161105802, 28.637132430880637 10.815379240156368, 28.41523396464064 11.156274872382301 M28.41523396464064 11.156274872382301 C28.16681034044649 11.489139896944721, 27.91838671625234 11.822004921507139, 27.667588908126582 12.158051136245302 M28.41523396464064 11.156274872382301 C28.11999538611408 11.55186767082007, 27.824756807587523 11.947460469257837, 27.667588908126582 12.158051136245302 M27.667588908126582 12.158051136245302 C27.43984415924058 12.425573077330126, 27.212099410354575 12.693095018414951, 26.85729594296866 13.10986736009567 M27.667588908126582 12.158051136245302 C27.504667123335192 12.349428335173448, 27.3417453385438 12.540805534101592, 26.85729594296866 13.10986736009567 M26.85729594296866 13.10986736009567 C26.544334282434267 13.433025969227614, 26.231372621899876 13.756184578359559, 25.98768473676799 14.007812326905684 M26.85729594296866 13.10986736009567 C26.612556110084153 13.36258133106289, 26.36781627719965 13.615295302030109, 25.98768473676799 14.007812326905684 M25.98768473676799 14.007812326905684 C25.790552654101944 14.186842468553898, 25.5934205714359 14.365872610202112, 25.062328708501887 14.848196188198111 M25.98768473676799 14.007812326905684 C25.682684406248146 14.284805557217275, 25.377684075728304 14.561798787528868, 25.062328708501887 14.848196188198111 M25.062328708501887 14.848196188198111 C24.78126876446864 15.072334014245405, 24.50020882043539 15.2964718402927, 24.085030344578715 15.627565626425152 M25.062328708501887 14.848196188198111 C24.72415837089761 15.117878033346901, 24.385988033293334 15.38755987849569, 24.085030344578715 15.627565626425152 M24.085030344578715 15.627565626425152 C23.69787828807769 15.89762614149786, 23.310726231576663 16.167686656570567, 23.059805573605708 16.34271804539089 M24.085030344578715 15.627565626425152 C23.73634333296647 15.870794591308403, 23.38765632135422 16.114023556191654, 23.059805573605708 16.34271804539089 M23.059805573605708 16.34271804539089 C22.68381278973175 16.57064708055414, 22.307820005857792 16.79857611571739, 21.990867264076787 16.990714730406093 M23.059805573605708 16.34271804539089 C22.63543310916321 16.59997512722535, 22.21106064472071 16.85723220905981, 21.990867264076787 16.990714730406093 M21.990867264076787 16.990714730406093 C21.573413969932318 17.208499846569666, 21.15596067578785 17.426284962733238, 20.882607912792388 17.56889292409717 M21.990867264076787 16.990714730406093 C21.76820661598773 17.106876647893202, 21.545545967898676 17.22303856538031, 20.882607912792388 17.56889292409717 M20.882607912792388 17.56889292409717 C20.65035070834225 17.671706298842068, 20.41809350389211 17.774519673586965, 19.739581595147804 18.07487676824742 M20.882607912792388 17.56889292409717 C20.44252574091446 17.76370424701373, 20.002443569036526 17.95851556993029, 19.739581595147804 18.07487676824742 M19.739581595147804 18.07487676824742 C19.420180507801753 18.192419320902054, 19.100779420455698 18.309961873556688, 18.566485251460616 18.506587066708033 M19.739581595147804 18.07487676824742 C19.407337303744896 18.19714573871625, 19.07509301234199 18.319414709185086, 18.566485251460616 18.506587066708033 M18.566485251460616 18.506587066708033 C18.10876323293089 18.642436559175753, 17.651041214401165 18.778286051643473, 17.368139386235413 18.86224982926107 M18.566485251460616 18.506587066708033 C18.140109300544896 18.633133210846783, 17.713733349629173 18.759679354985533, 17.368139386235413 18.86224982926107 M17.368139386235413 18.86224982926107 C16.941612875448996 18.95960172200247, 16.51508636466258 19.05695361474387, 16.149468259676766 19.140403561325773 M17.368139386235413 18.86224982926107 C16.990599566368587 18.948420829468105, 16.613059746501758 19.03459182967514, 16.149468259676766 19.140403561325773 M16.149468259676766 19.140403561325773 C15.721728077445041 19.209557276814344, 15.293987895213316 19.278710992302912, 14.915479652847878 19.3399052695533 M16.149468259676766 19.140403561325773 C15.689935573188553 19.21469724234798, 15.230402886700338 19.288990923370186, 14.915479652847878 19.3399052695533 M14.915479652847878 19.3399052695533 C14.485098123059972 19.38142365812242, 14.054716593272063 19.422942046691542, 13.6712442896239 19.45993515863156 M14.915479652847878 19.3399052695533 C14.44101977197073 19.385675843640026, 13.966559891093581 19.431446417726754, 13.6712442896239 19.45993515863156 M13.6712442896239 19.45993515863156 C13.32131200079371 19.471156806032464, 12.971379711963522 19.482378453433366, 12.421875000000004 19.5 M13.6712442896239 19.45993515863156 C13.195377435524335 19.47519528242389, 12.719510581424773 19.49045540621622, 12.421875000000004 19.5 M12.421875000000004 19.5 C12.421875000000004 19.5, 12.421875000000002 19.5, 12.421875 19.5 M12.421875000000004 19.5 C12.421875000000004 19.5, 12.421875000000002 19.5, 12.421875 19.5 M12.421875 19.5 C4.330857494113191 19.5, -3.7601600117736176 19.5, -12.421874999999996 19.5 M12.421875 19.5 C6.647976825351332 19.5, 0.8740786507026641 19.5, -12.421874999999996 19.5 M-12.421874999999996 19.5 C-12.786805909667656 19.488297376021883, -13.151736819335314 19.476594752043766, -13.671244289623893 19.45993515863156 M-12.421874999999996 19.5 C-12.86776608436187 19.48570114079886, -13.313657168723743 19.47140228159772, -13.671244289623893 19.45993515863156 M-13.671244289623893 19.45993515863156 C-13.993698865144285 19.428828353539473, -14.31615344066468 19.397721548447386, -14.915479652847871 19.3399052695533 M-13.671244289623893 19.45993515863156 C-14.079678673873902 19.420533984797174, -14.48811305812391 19.38113281096279, -14.915479652847871 19.3399052695533 M-14.915479652847871 19.3399052695533 C-15.29325017931443 19.278830260488373, -15.671020705780988 19.217755251423444, -16.14946825967676 19.140403561325773 M-14.915479652847871 19.3399052695533 C-15.360385044494373 19.267976416124736, -15.805290436140874 19.19604756269617, -16.14946825967676 19.140403561325773 M-16.14946825967676 19.140403561325773 C-16.632614924613538 19.03012848788059, -17.115761589550317 18.919853414435405, -17.368139386235388 18.862249829261074 M-16.14946825967676 19.140403561325773 C-16.60358710238816 19.03675389887929, -17.057705945099567 18.933104236432804, -17.368139386235388 18.862249829261074 M-17.368139386235388 18.862249829261074 C-17.845655143938743 18.72052565890608, -18.3231709016421 18.578801488551086, -18.56648525146059 18.506587066708043 M-17.368139386235388 18.862249829261074 C-17.71387371901617 18.759637694088283, -18.059608051796953 18.657025558915496, -18.56648525146059 18.506587066708043 M-18.56648525146059 18.506587066708043 C-19.022256008337376 18.338859215078696, -19.478026765214157 18.171131363449348, -19.739581595147797 18.074876768247425 M-18.56648525146059 18.506587066708043 C-18.932655118812857 18.37183317068526, -19.298824986165126 18.237079274662477, -19.739581595147797 18.074876768247425 M-19.739581595147797 18.074876768247425 C-20.03897795183034 17.942342882421432, -20.338374308512883 17.80980899659544, -20.88260791279238 17.568892924097174 M-19.739581595147797 18.074876768247425 C-20.132059467922264 17.901138456412607, -20.52453734069673 17.72740014457779, -20.88260791279238 17.568892924097174 M-20.88260791279238 17.568892924097174 C-21.23830172162414 17.383327691862405, -21.5939955304559 17.197762459627633, -21.99086726407678 16.990714730406097 M-20.88260791279238 17.568892924097174 C-21.130964165798567 17.43932562598362, -21.37932041880475 17.309758327870064, -21.99086726407678 16.990714730406097 M-21.99086726407678 16.990714730406097 C-22.413316120479223 16.734623751069893, -22.835764976881663 16.47853277173369, -23.059805573605686 16.3427180453909 M-21.99086726407678 16.990714730406097 C-22.250983521452177 16.83303072657233, -22.51109977882757 16.675346722738563, -23.059805573605686 16.3427180453909 M-23.059805573605686 16.3427180453909 C-23.38639123729486 16.114906024066855, -23.71297690098403 15.887094002742812, -24.085030344578712 15.627565626425156 M-23.059805573605686 16.3427180453909 C-23.430178424439877 16.08436197783127, -23.80055127527407 15.826005910271643, -24.085030344578712 15.627565626425156 M-24.085030344578712 15.627565626425156 C-24.378487390507146 15.393541441517188, -24.67194443643558 15.15951725660922, -25.06232870850187 14.848196188198125 M-24.085030344578712 15.627565626425156 C-24.424059532142 15.357198871289013, -24.763088719705287 15.086832116152868, -25.06232870850187 14.848196188198125 M-25.06232870850187 14.848196188198125 C-25.28461962970064 14.646317455060883, -25.506910550899406 14.44443872192364, -25.987684736767974 14.007812326905697 M-25.06232870850187 14.848196188198125 C-25.317182607227288 14.616744620440354, -25.572036505952703 14.38529305268258, -25.987684736767974 14.007812326905697 M-25.987684736767974 14.007812326905697 C-26.18697211562867 13.802031746433938, -26.386259494489362 13.59625116596218, -26.857295942968655 13.109867360095677 M-25.987684736767974 14.007812326905697 C-26.256555340911856 13.730181353440008, -26.525425945055737 13.45255037997432, -26.857295942968655 13.109867360095677 M-26.857295942968655 13.109867360095677 C-27.02451402884088 12.913443481451528, -27.1917321147131 12.717019602807381, -27.66758890812658 12.158051136245307 M-26.857295942968655 13.109867360095677 C-27.15774993969667 12.756936999222216, -27.458203936424688 12.404006638348754, -27.66758890812658 12.158051136245307 M-27.66758890812658 12.158051136245307 C-27.962701513252405 11.76262713068811, -28.25781411837823 11.367203125130914, -28.415233964640635 11.156274872382316 M-27.66758890812658 12.158051136245307 C-27.89585607324578 11.852193930552126, -28.12412323836498 11.546336724858943, -28.415233964640635 11.156274872382316 M-28.415233964640635 11.156274872382316 C-28.65272855118246 10.791419411228073, -28.890223137724284 10.426563950073831, -29.097158878604244 10.108655082055249 M-28.415233964640635 11.156274872382316 C-28.64333737582436 10.805846778461795, -28.871440787008083 10.455418684541277, -29.097158878604244 10.108655082055249 M-29.097158878604244 10.108655082055249 C-29.288594552177983 9.768741658661092, -29.480030225751722 9.428828235266936, -29.7105614742735 9.019496659696289 M-29.097158878604244 10.108655082055249 C-29.302711953677033 9.743674782757614, -29.508265028749822 9.378694483459979, -29.7105614742735 9.019496659696289 M-29.7105614742735 9.019496659696289 C-29.868675604726793 8.691169284709595, -30.02678973518009 8.362841909722901, -30.25292114880834 7.893275190886686 M-29.7105614742735 9.019496659696289 C-29.92473447251278 8.574761846284375, -30.13890747075206 8.13002703287246, -30.25292114880834 7.893275190886686 M-30.25292114880834 7.893275190886686 C-30.43392138944303 7.446201097117418, -30.614921630077717 6.99912700334815, -30.722009229970325 6.73461856121551 M-30.25292114880834 7.893275190886686 C-30.35561983327993 7.639607454697869, -30.458318517751522 7.385939718509052, -30.722009229970325 6.73461856121551 M-30.722009229970325 6.73461856121551 C-30.867190580091755 6.297355466156586, -31.01237193021318 5.860092371097661, -31.11589813421488 5.5482879393051325 M-30.722009229970325 6.73461856121551 C-30.82764589311282 6.4164577627469, -30.933282556255318 6.09829696427829, -31.11589813421488 5.5482879393051325 M-31.11589813421488 5.5482879393051325 C-31.1855578359613 5.282645305840315, -31.255217537707722 5.017002672375499, -31.432969287545557 4.339158212148136 M-31.11589813421488 5.5482879393051325 C-31.20131157968896 5.222569453291035, -31.286725025163037 4.8968509672769365, -31.432969287545557 4.339158212148136 M-31.432969287545557 4.339158212148136 C-31.49584747662348 4.016292000542973, -31.558725665701402 3.6934257889378106, -31.671919776581777 3.112197953150904 M-31.432969287545557 4.339158212148136 C-31.493796266135682 4.026824532874334, -31.554623244725803 3.7144908536005325, -31.671919776581777 3.112197953150904 M-31.671919776581777 3.112197953150904 C-31.725457600371875 2.696969164074018, -31.77899542416197 2.281740374997132, -31.831767702509364 1.872449005199809 M-31.671919776581777 3.112197953150904 C-31.717816678818807 2.756230642768982, -31.763713581055836 2.40026333238706, -31.831767702509364 1.872449005199809 M-31.831767702509364 1.872449005199809 C-31.85026514747064 1.5843363690590735, -31.86876259243192 1.296223732918338, -31.911856215913414 0.6250057626472781 M-31.831767702509364 1.872449005199809 C-31.852577724690672 1.54831611217837, -31.87338774687198 1.2241832191569308, -31.911856215913414 0.6250057626472781 M-31.911856215913414 0.6250057626472781 C-31.911856215913414 0.3444094729848822, -31.911856215913414 0.06381318332248631, -31.911856215913414 -0.6250057626472687 M-31.911856215913414 0.6250057626472781 C-31.911856215913414 0.13794563858912284, -31.911856215913414 -0.34911448546903245, -31.911856215913414 -0.6250057626472687 M-31.911856215913414 -0.6250057626472687 C-31.88434167641363 -1.0535669246929322, -31.85682713691385 -1.4821280867385958, -31.831767702509367 -1.8724490051997822 M-31.911856215913414 -0.6250057626472687 C-31.882219283168507 -1.086624912650728, -31.852582350423603 -1.5482440626541871, -31.831767702509367 -1.8724490051997822 M-31.831767702509367 -1.8724490051997822 C-31.781652249311676 -2.261134563785493, -31.731536796113982 -2.6498201223712043, -31.671919776581777 -3.112197953150895 M-31.831767702509367 -1.8724490051997822 C-31.78207105504668 -2.257886389207364, -31.732374407583986 -2.643323773214946, -31.671919776581777 -3.112197953150895 M-31.671919776581777 -3.112197953150895 C-31.603877632285553 -3.4615799833997185, -31.535835487989328 -3.810962013648542, -31.43296928754556 -4.339158212148126 M-31.671919776581777 -3.112197953150895 C-31.604879651832555 -3.456434824802767, -31.53783952708333 -3.800671696454639, -31.43296928754556 -4.339158212148126 M-31.43296928754556 -4.339158212148126 C-31.310615018342613 -4.805748069294684, -31.188260749139666 -5.272337926441242, -31.115898134214884 -5.548287939305123 M-31.43296928754556 -4.339158212148126 C-31.33475388380129 -4.71369611345028, -31.236538480057018 -5.088234014752434, -31.115898134214884 -5.548287939305123 M-31.115898134214884 -5.548287939305123 C-30.959024015996395 -6.02076778888279, -30.80214989777791 -6.493247638460458, -30.722009229970332 -6.734618561215485 M-31.115898134214884 -5.548287939305123 C-31.021962791500606 -5.831206224996174, -30.928027448786324 -6.114124510687224, -30.722009229970332 -6.734618561215485 M-30.722009229970332 -6.734618561215485 C-30.60544695169974 -7.022529642122188, -30.488884673429148 -7.310440723028891, -30.252921148808344 -7.893275190886676 M-30.722009229970332 -6.734618561215485 C-30.62189063108827 -6.981913436115604, -30.52177203220621 -7.229208311015722, -30.252921148808344 -7.893275190886676 M-30.252921148808344 -7.893275190886676 C-30.107075489605446 -8.19612682281869, -29.96122983040255 -8.498978454750704, -29.710561474273504 -9.019496659696282 M-30.252921148808344 -7.893275190886676 C-30.05214060035416 -8.310200295767315, -29.85136005189998 -8.727125400647953, -29.710561474273504 -9.019496659696282 M-29.710561474273504 -9.019496659696282 C-29.5510363640517 -9.30274964656415, -29.391511253829893 -9.586002633432019, -29.097158878604247 -10.108655082055243 M-29.710561474273504 -9.019496659696282 C-29.55021159058286 -9.30421411537544, -29.38986170689222 -9.588931571054601, -29.097158878604247 -10.108655082055243 M-29.097158878604247 -10.108655082055243 C-28.922879300282137 -10.37639531497749, -28.748599721960026 -10.644135547899737, -28.41523396464064 -11.156274872382308 M-29.097158878604247 -10.108655082055243 C-28.957068248285488 -10.323871909826337, -28.81697761796673 -10.539088737597432, -28.41523396464064 -11.156274872382308 M-28.41523396464064 -11.156274872382308 C-28.255947065935135 -11.369704805312688, -28.09666016722963 -11.583134738243068, -27.667588908126586 -12.158051136245302 M-28.41523396464064 -11.156274872382308 C-28.182470645546616 -11.468156514793701, -27.949707326452593 -11.780038157205093, -27.667588908126586 -12.158051136245302 M-27.667588908126586 -12.158051136245302 C-27.366263426844583 -12.512005192464752, -27.064937945562576 -12.865959248684202, -26.857295942968662 -13.10986736009567 M-27.667588908126586 -12.158051136245302 C-27.421220423589407 -12.447449576946578, -27.174851939052225 -12.736848017647855, -26.857295942968662 -13.10986736009567 M-26.857295942968662 -13.10986736009567 C-26.649173110855617 -13.324771271454685, -26.441050278742573 -13.539675182813697, -25.987684736767996 -14.007812326905677 M-26.857295942968662 -13.10986736009567 C-26.597759828758488 -13.377859706328932, -26.338223714548313 -13.645852052562194, -25.987684736767996 -14.007812326905677 M-25.987684736767996 -14.007812326905677 C-25.717802665210826 -14.252912083605585, -25.447920593653652 -14.498011840305491, -25.062328708501887 -14.848196188198107 M-25.987684736767996 -14.007812326905677 C-25.618369333755417 -14.3432148043716, -25.249053930742843 -14.678617281837523, -25.062328708501887 -14.848196188198107 M-25.062328708501887 -14.848196188198107 C-24.692604580778408 -15.143041341285343, -24.32288045305493 -15.437886494372579, -24.08503034457872 -15.627565626425149 M-25.062328708501887 -14.848196188198107 C-24.812658805244535 -15.04730129205069, -24.562988901987186 -15.246406395903271, -24.08503034457872 -15.627565626425149 M-24.08503034457872 -15.627565626425149 C-23.846186701997357 -15.794172612115261, -23.607343059415992 -15.960779597805375, -23.05980557360571 -16.342718045390885 M-24.08503034457872 -15.627565626425149 C-23.811322609868714 -15.818492293541977, -23.537614875158713 -16.009418960658806, -23.05980557360571 -16.342718045390885 M-23.05980557360571 -16.342718045390885 C-22.818342653042677 -16.489094286829825, -22.57687973247964 -16.635470528268762, -21.99086726407679 -16.99071473040609 M-23.05980557360571 -16.342718045390885 C-22.6389566089259 -16.597839160962824, -22.218107644246086 -16.85296027653476, -21.99086726407679 -16.99071473040609 M-21.99086726407679 -16.99071473040609 C-21.558165776927066 -17.21645481909357, -21.12546428977734 -17.442194907781055, -20.882607912792388 -17.56889292409717 M-21.99086726407679 -16.99071473040609 C-21.612438431854248 -17.188140809781356, -21.2340095996317 -17.38556688915662, -20.882607912792388 -17.56889292409717 M-20.882607912792388 -17.56889292409717 C-20.44119510220533 -17.764293281298265, -19.999782291618278 -17.95969363849936, -19.739581595147804 -18.07487676824742 M-20.882607912792388 -17.56889292409717 C-20.591500737103132 -17.697757435387253, -20.300393561413873 -17.826621946677335, -19.739581595147804 -18.07487676824742 M-19.739581595147804 -18.07487676824742 C-19.422099841869535 -18.19171298822298, -19.104618088591263 -18.30854920819854, -18.56648525146062 -18.506587066708033 M-19.739581595147804 -18.07487676824742 C-19.35034363112179 -18.21811993708529, -18.961105667095776 -18.36136310592316, -18.56648525146062 -18.506587066708033 M-18.56648525146062 -18.506587066708033 C-18.239708640446583 -18.603572649571564, -17.912932029432543 -18.7005582324351, -17.368139386235413 -18.862249829261067 M-18.56648525146062 -18.506587066708033 C-18.18981354071804 -18.618381253266275, -17.813141829975457 -18.730175439824517, -17.368139386235413 -18.862249829261067 M-17.368139386235413 -18.862249829261067 C-16.911454640268094 -18.966485142381632, -16.454769894300775 -19.070720455502197, -16.149468259676766 -19.140403561325773 M-17.368139386235413 -18.862249829261067 C-16.902899035758644 -18.96843790328038, -16.437658685281875 -19.074625977299686, -16.149468259676766 -19.140403561325773 M-16.149468259676766 -19.140403561325773 C-15.695146350682784 -19.213854804252897, -15.2408244416888 -19.287306047180017, -14.91547965284788 -19.3399052695533 M-16.149468259676766 -19.140403561325773 C-15.832515101448044 -19.19164608993974, -15.515561943219321 -19.242888618553707, -14.91547965284788 -19.3399052695533 M-14.91547965284788 -19.3399052695533 C-14.647869688719695 -19.365721280944676, -14.380259724591507 -19.39153729233605, -13.671244289623903 -19.45993515863156 M-14.91547965284788 -19.3399052695533 C-14.462850236737388 -19.383569884958963, -14.010220820626897 -19.427234500364623, -13.671244289623903 -19.45993515863156 M-13.671244289623903 -19.45993515863156 C-13.340519376129679 -19.470540862890328, -13.009794462635455 -19.481146567149093, -12.421875000000005 -19.5 M-13.671244289623903 -19.45993515863156 C-13.377205973650495 -19.469364395113963, -13.083167657677087 -19.478793631596368, -12.421875000000005 -19.5 M-12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000004 -19.5, -12.421875 -19.5 M-12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5" stroke="#9370DB" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="label" style="" transform="translate(-19.546875, -12)"><rect></rect><foreignObject width="39.09375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Start</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-decision-1" transform="translate(182.88621139526367, 87)"><polygon points="61.0625,0 122.125,-61.0625 61.0625,-122.125 0,-61.0625" class="label-container" transform="translate(-60.5625, 61.0625)"></polygon><g class="label" style="" transform="translate(-34.0625, -12)"><rect></rect><foreignObject width="68.125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Decision</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-optionA-3" transform="translate(358.6830863952637, 35)"><rect class="basic label-container" style="" x="-64.71875" y="-27" width="129.4375" height="54"></rect><g class="label" style="" transform="translate(-34.71875, -12)"><rect></rect><foreignObject width="69.4375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Option A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-optionB-4" transform="translate(358.6830863952637, 139)"><rect class="basic label-container" style="" x="-64.734375" y="-27" width="129.46875" height="54"></rect><g class="label" style="" transform="translate(-34.734375, -12)"><rect></rect><foreignObject width="69.46875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Option B</p></span></div></foreignObject></g></g></g></g></g></svg></body></html><figcaption>A basic Mermaid-generated flowchart. I usually start with describing the flows between the nodes and then add a second block to describe how the nodes should be shaped.</figcaption></figure><p>The flowchart syntax is powerful and simple. It's basically nodes and edges to connect nodes, which, as a general concept, can be applied in many communication situations. You get the complete syntax on the Mermaid site at <a href="https://mermaid.js.org/syntax/flowchart.html">Flowcharts – basic syntax</a>. Visit the <a href="https://mermaid.js.org/intro/">Mermaid docs</a> to get an overview of all available diagram types.</p> <h3 id="mermaid-radar-chart" tabindex="-1">Mermaid Radar Chart</h3> <p>Mermaid does also have more <em>exotic</em> chart types, like the radar or the Sankey.</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-qnvnymitxpok" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 700px;" viewBox="0 0 700 700" role="graphics-document document" aria-roledescription="radar"><style>#mermaid-qnvnymitxpok{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-qnvnymitxpok .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-qnvnymitxpok .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-qnvnymitxpok .error-icon{fill:#552222;}#mermaid-qnvnymitxpok .error-text{fill:#552222;stroke:#552222;}#mermaid-qnvnymitxpok .edge-thickness-normal{stroke-width:1px;}#mermaid-qnvnymitxpok .edge-thickness-thick{stroke-width:3.5px;}#mermaid-qnvnymitxpok .edge-pattern-solid{stroke-dasharray:0;}#mermaid-qnvnymitxpok .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-qnvnymitxpok .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-qnvnymitxpok .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-qnvnymitxpok .marker{fill:#333333;stroke:#333333;}#mermaid-qnvnymitxpok .marker.cross{stroke:#333333;}#mermaid-qnvnymitxpok svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-qnvnymitxpok p{margin:0;}#mermaid-qnvnymitxpok .radarTitle{font-size:16px;color:#333;dominant-baseline:hanging;text-anchor:middle;}#mermaid-qnvnymitxpok .radarAxisLine{stroke:#333333;stroke-width:2;}#mermaid-qnvnymitxpok .radarAxisLabel{dominant-baseline:middle;text-anchor:middle;font-size:12px;color:#333333;}#mermaid-qnvnymitxpok .radarGraticule{fill:#DEDEDE;fill-opacity:0.3;stroke:#DEDEDE;stroke-width:1;}#mermaid-qnvnymitxpok .radarLegendText{text-anchor:start;font-size:12px;dominant-baseline:hanging;}#mermaid-qnvnymitxpok .radarCurve-0{color:hsl(240, 100%, 76.2745098039%);fill:hsl(240, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(240, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-0{fill:hsl(240, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-1{color:hsl(60, 100%, 73.5294117647%);fill:hsl(60, 100%, 73.5294117647%);fill-opacity:0.5;stroke:hsl(60, 100%, 73.5294117647%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-1{fill:hsl(60, 100%, 73.5294117647%);fill-opacity:0.5;stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-qnvnymitxpok .radarCurve-2{color:hsl(80, 100%, 76.2745098039%);fill:hsl(80, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(80, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-2{fill:hsl(80, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-3{color:hsl(270, 100%, 76.2745098039%);fill:hsl(270, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(270, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-3{fill:hsl(270, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-4{color:hsl(300, 100%, 76.2745098039%);fill:hsl(300, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(300, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-4{fill:hsl(300, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-5{color:hsl(330, 100%, 76.2745098039%);fill:hsl(330, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(330, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-5{fill:hsl(330, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-6{color:hsl(0, 100%, 76.2745098039%);fill:hsl(0, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(0, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-6{fill:hsl(0, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-7{color:hsl(30, 100%, 76.2745098039%);fill:hsl(30, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(30, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-7{fill:hsl(30, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-8{color:hsl(90, 100%, 76.2745098039%);fill:hsl(90, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(90, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-8{fill:hsl(90, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-9{color:hsl(150, 100%, 76.2745098039%);fill:hsl(150, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(150, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-9{fill:hsl(150, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-10{color:hsl(180, 100%, 76.2745098039%);fill:hsl(180, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(180, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-10{fill:hsl(180, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok .radarCurve-11{color:hsl(210, 100%, 76.2745098039%);fill:hsl(210, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(210, 100%, 76.2745098039%);stroke-width:2;}#mermaid-qnvnymitxpok .radarLegendBox-11{fill:hsl(210, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-qnvnymitxpok :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g transform="translate(350, 350)"><circle r="60" class="radarGraticule"></circle><circle r="120" class="radarGraticule"></circle><circle r="180" class="radarGraticule"></circle><circle r="240" class="radarGraticule"></circle><circle r="300" class="radarGraticule"></circle><line x1="0" y1="0" x2="1.8369701987210297e-14" y2="-300" class="radarAxisLine"></line><text x="1.9288187086570814e-14" y="-315" class="radarAxisLabel">Math</text><line x1="0" y1="0" x2="259.8076211353316" y2="-150" class="radarAxisLine"></line><text x="272.7980021920982" y="-157.5" class="radarAxisLabel">Science</text><line x1="0" y1="0" x2="259.8076211353316" y2="149.99999999999994" class="radarAxisLine"></line><text x="272.7980021920982" y="157.49999999999994" class="radarAxisLabel">English</text><line x1="0" y1="0" x2="1.8369701987210297e-14" y2="300" class="radarAxisLine"></line><text x="1.9288187086570814e-14" y="315" class="radarAxisLabel">History</text><line x1="0" y1="0" x2="-259.80762113533154" y2="150.0000000000001" class="radarAxisLine"></line><text x="-272.7980021920981" y="157.5000000000001" class="radarAxisLabel">Geography</text><line x1="0" y1="0" x2="-259.8076211353316" y2="-150.00000000000003" class="radarAxisLine"></line><text x="-272.7980021920982" y="-157.50000000000003" class="radarAxisLabel">Art</text><path d="M1.5614246689128753e-14,-255 C79.50113206741148,-255 198.4930225473933,-198.75 233.8268590217984,-135 C269.1606954962035,-71.25 247.596662941971,61.34999999999995 207.84609690826528,119.99999999999996 C168.09553087455956,178.64999999999998 68.45930816915988,211.27499999999998 1.2858791391047208e-14,210 C-68.45930816915985,208.72500000000002 -155.10514981779295,171.1500000000001 -194.85571585149867,112.50000000000007 C-234.6062818852044,53.850000000000065 -266.9523307165532,-72.525 -233.8268590217984,-135.00000000000003 C-200.70138732704362,-197.47500000000005 -79.50113206741145,-255 1.5614246689128753e-14,-255 Z" class="radarCurve-0"></path><path d="M1.2858791391047208e-14,-210 C70.6676729488102,-207.45 157.31351459744326,-169.875 194.85571585149867,-112.5 C232.3979171055541,-55.12500000000001 253.96194965978663,67.57499999999996 220.83647796503186,127.49999999999996 C187.7110062702771,187.42499999999995 77.29276728776117,238.72499999999997 1.469576158976824e-14,240 C-77.29276728776114,241.27500000000003 -196.28465776774297,197.47500000000008 -233.82685902179838,135.00000000000009 C-271.3690602758538,72.52500000000009 -260.58704399873756,-68.85 -220.83647796503183,-127.50000000000003 C-181.0859119313261,-186.15000000000006 -70.66767294881018,-212.55 1.2858791391047208e-14,-210 Z" class="radarCurve-1"></path><g transform="translate(262.5, -262.5)"><rect width="12" height="12" class="radarLegendBox-0"></rect><text x="16" y="0" class="radarLegendText">Alice</text></g><g transform="translate(262.5, -242.5)"><rect width="12" height="12" class="radarLegendBox-1"></rect><text x="16" y="0" class="radarLegendText">Bob</text></g><text class="radarTitle" x="0" y="-350"></text></g></svg></body></html><figcaption>A Mermaid-generated radar chart, made with a few lines of text</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">radar-beta axis m["Math"], s["Science"], e["English"], h["History"], g["Geography"], a["Art"] curve a["Alice"]{85, 90, 80, 70, 75, 90} curve b["Bob"]{70, 75, 85, 80, 90, 85} max 100 min 0</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-sankey-chart" tabindex="-1">Mermaid Sankey Chart</h3> <figure class="mermaid"><html><head></head><body><svg id="mermaid-azvfqwotwszy" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 600px;" viewBox="0 0 600 403.91900634765625" role="graphics-document document" aria-roledescription="sankey"><style>#mermaid-azvfqwotwszy{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-azvfqwotwszy .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-azvfqwotwszy .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-azvfqwotwszy .error-icon{fill:#552222;}#mermaid-azvfqwotwszy .error-text{fill:#552222;stroke:#552222;}#mermaid-azvfqwotwszy .edge-thickness-normal{stroke-width:1px;}#mermaid-azvfqwotwszy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-azvfqwotwszy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-azvfqwotwszy .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-azvfqwotwszy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-azvfqwotwszy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-azvfqwotwszy .marker{fill:#333333;stroke:#333333;}#mermaid-azvfqwotwszy .marker.cross{stroke:#333333;}#mermaid-azvfqwotwszy svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-azvfqwotwszy p{margin:0;}#mermaid-azvfqwotwszy .label{font-family:arial,sans-serif;}#mermaid-azvfqwotwszy :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g class="nodes"><g class="node" id="node-1" transform="translate(0,72.09567842889594)" x="0" y="72.09567842889594"><rect height="9.220636581860191" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-2" transform="translate(84.28571428571429,88.20528658319179)" x="84.28571428571429" y="88.20528658319179"><rect height="28.751421743138962" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-3" transform="translate(168.57142857142858,332.97985250039255)" x="168.57142857142858" y="332.97985250039255"><rect height="47.8731039464526" width="10" fill="#e15759"></rect></g><g class="node" id="node-4" transform="translate(590,0.18272916807304762)" x="590" y="0.18272916807304762"><rect height="64.93049431777976" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-5" transform="translate(168.57142857142858,95.13615275845761)" x="168.57142857142858" y="95.13615275845761"><rect height="33.08012136432423" width="10" fill="#59a14f"></rect></g><g class="node" id="node-6" transform="translate(168.57142857142858,138.21627412278184)" x="168.57142857142858" y="138.21627412278184"><rect height="15.08794477986612" width="10" fill="#edc949"></rect></g><g class="node" id="node-7" transform="translate(0,332.17102949516357)" x="0" y="332.17102949516357"><rect height="2.587387699453302" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-8" transform="translate(0,125.0948937639732)" x="0" y="125.0948937639732"><rect height="2.5873876994532594" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-9" transform="translate(0,137.68228146342648)" x="0" y="137.68228146342648"><rect height="0.8579777611386987" width="10" fill="#9c755f"></rect></g><g class="node" id="node-10" transform="translate(84.28571428571429,158.44588836836448)" x="84.28571428571429" y="158.44588836836448"><rect height="5.586613595296626" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-11" transform="translate(0,168.47560621437722)" x="0" y="168.47560621437722"><rect height="4.728635834157956" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-12" transform="translate(337.14285714285717,63.864261550154154)" x="337.14285714285717" y="63.864261550154154"><rect height="5.86442510885513" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-13" transform="translate(590,96.60216340475654)" x="590" y="96.60216340475654"><rect height="42.05813490533856" width="10" fill="#e15759"></rect></g><g class="node" id="node-14" transform="translate(590,186.1752444343467)" x="590" y="186.1752444343467"><rect height="9.91812238026995" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-15" transform="translate(590,148.6602983100951)" x="590" y="148.6602983100951"><rect height="27.514946124251594" width="10" fill="#59a14f"></rect></g><g class="node" id="node-16" transform="translate(337.14285714285717,197.4656550581489)" x="337.14285714285717" y="197.4656550581489"><rect height="67.90835578376198" width="10" fill="#edc949"></rect></g><g class="node" id="node-17" transform="translate(590,78.88043747987103)" x="590" y="78.88043747987103"><rect height="7.721725924885504" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-18" transform="translate(421.42857142857144,242.73268021576226)" x="421.42857142857144" y="242.73268021576226"><rect height="2.006334347518873" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-19" transform="translate(590,298.3074464040654)" x="590" y="298.3074464040654"><rect height="14.380626908198394" width="10" fill="#9c755f"></rect></g><g class="node" id="node-20" transform="translate(590,233.9039735188384)" x="590" y="233.9039735188384"><rect height="0.8153967521419645" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-21" transform="translate(590,322.6880733122638)" x="590" y="322.6880733122638"><rect height="0.9075077542424879" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-22" transform="translate(590,217.2500994601987)" x="590" y="217.2500994601987"><rect height="6.653874058639701" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-23" transform="translate(590,244.71937027098036)" x="590" y="244.71937027098036"><rect height="6.911577873505337" width="10" fill="#e15759"></rect></g><g class="node" id="node-24" transform="translate(0,183.20424204853518)" x="0" y="183.20424204853518"><rect height="3.010166849543907" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-25" transform="translate(84.28571428571429,184.7650080756903)" x="84.28571428571429" y="184.7650080756903"><rect height="9.089271212090779" width="10" fill="#59a14f"></rect></g><g class="node" id="node-26" transform="translate(0,196.21440889807909)" x="0" y="196.21440889807909"><rect height="6.079104362546872" width="10" fill="#edc949"></rect></g><g class="node" id="node-27" transform="translate(252.8571428571429,4.1019553082988605)" x="252.8571428571429" y="4.1019553082988605"><rect height="102.9032918964073" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-28" transform="translate(0,212.29351326062596)" x="0" y="212.29351326062596"><rect height="0.5184385696075822" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-29" transform="translate(505.7142857142858,247.55307040930583)" x="505.7142857142858" y="247.55307040930583"><rect height="1.5448183072992947" width="10" fill="#9c755f"></rect></g><g class="node" id="node-30" transform="translate(0,268.15814958480337)" x="0" y="268.15814958480337"><rect height="0.5171079130764156" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-31" transform="translate(590,333.59558106650627)" x="590" y="333.59558106650627"><rect height="9.513454944075534" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-32" transform="translate(590,353.1090360105818)" x="590" y="353.1090360105818"><rect height="1.0688128959627647" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-33" transform="translate(590,364.17784890654457)" x="590" y="364.17784890654457"><rect height="15.248362817232191" width="10" fill="#e15759"></rect></g><g class="node" id="node-34" transform="translate(590,389.42621172377676)" x="590" y="389.42621172377676"><rect height="2.4556527028696564" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-35" transform="translate(0,91.31631501075613)" x="0" y="91.31631501075613"><rect height="0.32342346243166276" width="10" fill="#59a14f"></rect></g><g class="node" id="node-36" transform="translate(0,0)" x="0" y="0"><rect height="62.09567842889594" width="10" fill="#edc949"></rect></g><g class="node" id="node-37" transform="translate(0,344.75841719461687)" x="0" y="344.75841719461687"><rect height="37.279599451262754" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-38" transform="translate(84.28571428571429,341.6162789921701)" x="84.28571428571429" y="341.6162789921701"><rect height="45.241582805382905" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-39" transform="translate(0,392.0380166458796)" x="0" y="392.0380166458796"><rect height="7.961983354120434" width="10" fill="#9c755f"></rect></g><g class="node" id="node-40" transform="translate(0,148.54025922456518)" x="0" y="148.54025922456518"><rect height="9.935346989812047" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-41" transform="translate(0,222.81195183023354)" x="0" y="222.81195183023354"><rect height="19.493970330583636" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-42" transform="translate(84.28571428571429,242.0714175626971)" x="84.28571428571429" y="242.0714175626971"><rect height="4.428203159569989" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-43" transform="translate(84.28571428571429,256.4996207222671)" x="84.28571428571429" y="256.4996207222671"><rect height="1.424024264416289" width="10" fill="#e15759"></rect></g><g class="node" id="node-44" transform="translate(0,252.30592216081718)" x="0" y="252.30592216081718"><rect height="5.852227423986193" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-45" transform="translate(0,278.6752574978798)" x="0" y="278.6752574978798"><rect height="0.6987425295780554" width="10" fill="#59a14f"></rect></g><g class="node" id="node-46" transform="translate(0,101.63973847318779)" x="0" y="101.63973847318779"><rect height="13.455155290785413" width="10" fill="#edc949"></rect></g><g class="node" id="node-47" transform="translate(0,289.37400002745784)" x="0" y="289.37400002745784"><rect height="1.405542923705866" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-48" transform="translate(0,300.7795429511637)" x="0" y="300.7795429511637"><rect height="21.39148654399986" width="10" fill="#ff9da7"></rect></g></g><g class="node-labels" font-size="14"><text x="16" y="76.70599671982603" dy="0.35em" text-anchor="start">Agricultural waste</text><text x="100.28571428571429" y="102.58099745476127" dy="0.35em" text-anchor="start">Bio-conversion</text><text x="184.57142857142858" y="356.91640447361885" dy="0.35em" text-anchor="start">Liquid</text><text x="584" y="32.64797632696293" dy="0.35em" text-anchor="end">Losses</text><text x="184.57142857142858" y="111.67621344061973" dy="0.35em" text-anchor="start">Solid</text><text x="184.57142857142858" y="145.7602465127149" dy="0.35em" text-anchor="start">Gas</text><text x="16" y="333.4647233448902" dy="0.35em" text-anchor="start">Biofuel imports</text><text x="16" y="126.38858761369983" dy="0.35em" text-anchor="start">Biomass imports</text><text x="16" y="138.11127034399584" dy="0.35em" text-anchor="start">Coal imports</text><text x="100.28571428571429" y="161.2391951660128" dy="0.35em" text-anchor="start">Coal</text><text x="16" y="170.8399241314562" dy="0.35em" text-anchor="start">Coal reserves</text><text x="331.14285714285717" y="66.79647410458172" dy="0.35em" text-anchor="end">District heating</text><text x="584" y="117.63123085742582" dy="0.35em" text-anchor="end">Industry</text><text x="584" y="191.13430562448167" dy="0.35em" text-anchor="end">Heating and cooling - commercial</text><text x="584" y="162.4177713722209" dy="0.35em" text-anchor="end">Heating and cooling - homes</text><text x="331.14285714285717" y="231.4198329500299" dy="0.35em" text-anchor="end">Electricity grid</text><text x="584" y="82.74130044231379" dy="0.35em" text-anchor="end">Over generation / exports</text><text x="415.42857142857144" y="243.7358473895217" dy="0.35em" text-anchor="end">H2 conversion</text><text x="584" y="305.4977598581646" dy="0.35em" text-anchor="end">Road transport</text><text x="584" y="234.31167189490938" dy="0.35em" text-anchor="end">Agriculture</text><text x="584" y="323.141827189385" dy="0.35em" text-anchor="end">Rail transport</text><text x="584" y="220.57703648951855" dy="0.35em" text-anchor="end">Lighting & appliances - commercial</text><text x="584" y="248.17515920773303" dy="0.35em" text-anchor="end">Lighting & appliances - homes</text><text x="16" y="184.70932547330713" dy="0.35em" text-anchor="start">Gas imports</text><text x="100.28571428571429" y="189.30964368173568" dy="0.35em" text-anchor="start">NGas</text><text x="16" y="199.2539610793525" dy="0.35em" text-anchor="start">Gas reserves</text><text x="268.8571428571429" y="55.5536012565025" dy="0.35em" text-anchor="start">Thermal generation</text><text x="16" y="212.55273254542976" dy="0.35em" text-anchor="start">Geothermal</text><text x="499.7142857142858" y="248.32547956295548" dy="0.35em" text-anchor="end">H2</text><text x="16" y="268.4167035413416" dy="0.35em" text-anchor="start">Hydro</text><text x="584" y="338.35230853854404" dy="0.35em" text-anchor="end">International shipping</text><text x="584" y="353.6434424585632" dy="0.35em" text-anchor="end">Domestic aviation</text><text x="584" y="371.80203031516066" dy="0.35em" text-anchor="end">International aviation</text><text x="584" y="390.6540380752116" dy="0.35em" text-anchor="end">National navigation</text><text x="16" y="91.47802674197196" dy="0.35em" text-anchor="start">Marine algae</text><text x="16" y="31.04783921444797" dy="0.35em" text-anchor="start">Nuclear</text><text x="16" y="363.3982169202483" dy="0.35em" text-anchor="start">Oil imports</text><text x="100.28571428571429" y="364.2370703948616" dy="0.35em" text-anchor="start">Oil</text><text x="16" y="396.01900832293984" dy="0.35em" text-anchor="start">Oil reserves</text><text x="16" y="153.5079327194712" dy="0.35em" text-anchor="start">Other waste</text><text x="16" y="232.55893699552536" dy="0.35em" text-anchor="start">Pumped heat</text><text x="100.28571428571429" y="244.2855191424821" dy="0.35em" text-anchor="start">Solar PV</text><text x="100.28571428571429" y="257.2116328544752" dy="0.35em" text-anchor="start">Solar Thermal</text><text x="16" y="255.2320358728103" dy="0.35em" text-anchor="start">Solar</text><text x="16" y="279.02462876266884" dy="0.35em" text-anchor="start">Tidal</text><text x="16" y="108.3673161185805" dy="0.35em" text-anchor="start">UK land based bioenergy</text><text x="16" y="290.0767714893108" dy="0.35em" text-anchor="start">Wave</text><text x="16" y="311.4752862231636" dy="0.35em" text-anchor="start">Wind</text></g><g class="links" fill="none" stroke-opacity="0.5"><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-49" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,76.70599671982603C47.142857142857146,76.70599671982603,47.142857142857146,92.81560487412189,84.28571428571429,92.81560487412189" stroke="url(#linearGradient-49)" stroke-width="9.220636581860193"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-50" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M94.28571428571429,116.93464160552253C131.42857142857144,116.93464160552253,131.42857142857144,333.00191922120075,168.57142857142858,333.00191922120075" stroke="url(#linearGradient-50)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-51" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M94.28571428571429,89.19817813151627C342.14285714285717,89.19817813151627,342.14285714285717,59.36441764448186,590,59.36441764448186" stroke="url(#linearGradient-51)" stroke-width="1.9857830966489627"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-52" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M94.28571428571429,100.5525224610713C131.42857142857144,100.5525224610713,131.42857142857144,105.49760553968817,168.57142857142858,105.49760553968817" stroke="url(#linearGradient-52)" stroke-width="20.72290556246112"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-53" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M94.28571428571429,113.91327506350811C131.42857142857144,113.91327506350811,131.42857142857144,141.21557394398806,168.57142857142858,141.21557394398806" stroke="url(#linearGradient-53)" stroke-width="5.998599642412458"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-54" gradientUnits="userSpaceOnUse" x1="10" x2="168.57142857142858"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M10,333.4647233448902C89.28571428571429,333.4647233448902,89.28571428571429,334.3176797917356,168.57142857142858,334.3176797917356" stroke="url(#linearGradient-54)" stroke-width="2.5873876994532683"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-55" gradientUnits="userSpaceOnUse" x1="10" x2="168.57142857142858"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,126.38858761369984C89.28571428571429,126.38858761369984,89.28571428571429,117.15275217064537,168.57142857142858,117.15275217064537" stroke="url(#linearGradient-55)" stroke-width="2.5873876994532683"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-56" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#9c755f"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M10,138.11127034399584C47.142857142857146,138.11127034399584,47.142857142857146,158.87487724893384,84.28571428571429,158.87487724893384" stroke="url(#linearGradient-56)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-57" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M10,170.8399241314562C47.142857142857146,170.8399241314562,47.142857142857146,161.66818404658216,84.28571428571429,161.66818404658216" stroke="url(#linearGradient-57)" stroke-width="4.728635834157952"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-58" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M94.28571428571429,161.23919516601282C131.42857142857144,161.23919516601282,131.42857142857144,125.42296732513354,168.57142857142858,125.42296732513354" stroke="url(#linearGradient-58)" stroke-width="5.586613595296655"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-59" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M347.14285714285717,64.25750751778963C468.57142857142856,64.25750751778963,468.57142857142856,96.99540937239202,590,96.99540937239202" stroke="url(#linearGradient-59)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-60" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M347.14285714285717,68.89676758827218C468.57142857142856,68.89676758827218,468.57142857142856,187.0070895797209,590,187.0070895797209" stroke="url(#linearGradient-60)" stroke-width="1.6636902907484517"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-61" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M347.14285714285717,66.35783796416152C468.57142857142856,66.35783796416152,468.57142857142856,150.36738278883152,590,150.36738278883152" stroke="url(#linearGradient-61)" stroke-width="3.41416895747285"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-62" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M347.14285714285717,205.5174207654404C468.57142857142856,205.5174207654404,468.57142857142856,82.74130044231379,590,82.74130044231379" stroke="url(#linearGradient-62)" stroke-width="7.721725924885494"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-63" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M347.14285714285717,238.87657341180997C468.57142857142856,238.87657341180997,468.57142857142856,156.2780851748254,590,156.2780851748254" stroke="url(#linearGradient-63)" stroke-width="8.407235814514927"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-64" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="421.42857142857144"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#ff9da7"></stop></linearGradient><path d="M347.14285714285717,247.1038009678058C384.28571428571433,247.1038009678058,384.28571428571433,243.73584738952172,421.42857142857144,243.73584738952172" stroke="url(#linearGradient-64)" stroke-width="2.006334347518906"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-65" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M347.14285714285717,222.02561961621782C468.57142857142856,222.02561961621782,468.57142857142856,117.06311444398872,590,117.06311444398872" stroke="url(#linearGradient-65)" stroke-width="25.29467177666936"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-66" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M347.14285714285717,263.39565724422755C468.57142857142856,263.39565724422755,468.57142857142856,299.7045248737259,590,299.7045248737259" stroke="url(#linearGradient-66)" stroke-width="2.794156939321005"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-67" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M347.14285714285717,254.92392155063334C468.57142857142856,254.92392155063334,468.57142857142856,234.28720259980886,590,234.28720259980886" stroke="url(#linearGradient-67)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-68" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M347.14285714285717,244.59041255655688C468.57142857142856,244.59041255655688,468.57142857142856,189.35869233439115,590,189.35869233439115" stroke="url(#linearGradient-68)" stroke-width="3.020442474978904"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-69" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M347.14285714285717,199.56110643057326C468.57142857142856,199.56110643057326,468.57142857142856,62.556329998571684,590,62.556329998571684" stroke="url(#linearGradient-69)" stroke-width="4.190902744848722"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-70" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#4e79a7"></stop></linearGradient><path d="M347.14285714285717,265.08337327789945C468.57142857142856,265.08337327789945,468.57142857142856,322.9787108762752,590,322.9787108762752" stroke="url(#linearGradient-70)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-71" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M347.14285714285717,251.43390517088508C468.57142857142856,251.43390517088508,468.57142857142856,220.57703648951855,590,220.57703648951855" stroke="url(#linearGradient-71)" stroke-width="6.653874058639708"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-72" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M347.14285714285717,258.5427898378144C468.57142857142856,258.5427898378144,468.57142857142856,248.175159207733,590,248.175159207733" stroke="url(#linearGradient-72)" stroke-width="6.911577873505254"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-73" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#76b7b2"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,184.70932547330713C47.142857142857146,184.70932547330713,47.142857142857146,186.27009150046226,84.28571428571429,186.27009150046226" stroke="url(#linearGradient-73)" stroke-width="3.010166849543933"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-74" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,199.25396107935254C47.142857142857146,199.25396107935254,47.142857142857146,190.8147271065077,84.28571428571429,190.8147271065077" stroke="url(#linearGradient-74)" stroke-width="6.079104362546875"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-75" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M178.57142857142858,153.14450315622886C384.2857142857143,153.14450315622886,384.2857142857143,187.84370291099845,590,187.84370291099845" stroke="url(#linearGradient-75)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-76" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M178.57142857142858,138.26805883945232C384.2857142857143,138.26805883945232,384.2857142857143,60.40909390947684,590,60.40909390947684" stroke="url(#linearGradient-76)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-77" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="252.8571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M178.57142857142858,143.9341421998036C215.71428571428572,143.9341421998036,215.71428571428572,101.39094856102537,252.8571428571429,101.39094856102537" stroke="url(#linearGradient-77)" stroke-width="11.22859728736161"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-78" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M178.57142857142858,153.22674512239004C384.2857142857143,153.22674512239004,384.2857142857143,234.04664946912254,590,234.04664946912254" stroke="url(#linearGradient-78)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-79" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,151.344087906905C384.2857142857143,151.344087906905,384.2857142857143,102.62013149223348,590,102.62013149223348" stroke="url(#linearGradient-79)" stroke-width="3.5912941268411367"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-80" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,212.55273254542976C173.57142857142858,212.55273254542976,173.57142857142858,236.5749442024206,337.14285714285717,236.5749442024206" stroke="url(#linearGradient-80)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-81" gradientUnits="userSpaceOnUse" x1="431.42857142857144" x2="505.7142857142858"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M431.42857142857144,243.9665314842687C468.5714285714286,243.9665314842687,468.5714285714286,248.32547956295548,505.7142857142858,248.32547956295548" stroke="url(#linearGradient-81)" stroke-width="1.5448183072992843"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-82" gradientUnits="userSpaceOnUse" x1="431.42857142857144" x2="590"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M431.42857142857144,242.96340127319064C510.7142857142857,242.96340127319064,510.7142857142857,64.88250242842444,590,64.88250242842444" stroke="url(#linearGradient-82)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-83" gradientUnits="userSpaceOnUse" x1="515.7142857142858" x2="590"><stop offset="0%" stop-color="#9c755f"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M515.7142857142858,248.32547956295548C552.8571428571429,248.32547956295548,552.8571428571429,301.874012497036,590,301.874012497036" stroke="url(#linearGradient-83)" stroke-width="1.5448183072992843"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-84" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,268.4167035413416C173.57142857142858,268.4167035413416,173.57142857142858,241.52092060333263,337.14285714285717,241.52092060333263" stroke="url(#linearGradient-84)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-85" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,337.4547764892784C384.2857142857143,337.4547764892784,384.2857142857143,134.18537432120925,590,134.18537432120925" stroke="url(#linearGradient-85)" stroke-width="8.949847977771698"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-86" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#4e79a7"></stop></linearGradient><path d="M178.57142857142858,357.3234005587429C384.2857142857143,357.3234005587429,384.2857142857143,338.352308538544,590,338.352308538544" stroke="url(#linearGradient-86)" stroke-width="9.51345494407546"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-87" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M178.57142857142858,347.2196146296965C384.2857142857143,347.2196146296965,384.2857142857143,307.66724748147476,590,307.66724748147476" stroke="url(#linearGradient-87)" stroke-width="10.041651661578136"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-88" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M178.57142857142858,362.61453447876204C384.2857142857143,362.61453447876204,384.2857142857143,353.6434424585632,590,353.6434424585632" stroke="url(#linearGradient-88)" stroke-width="1.0688128959627246"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-89" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,370.77312233535946C384.2857142857143,370.77312233535946,384.2857142857143,371.80203031516066,590,371.80203031516066" stroke="url(#linearGradient-89)" stroke-width="15.24836281723221"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-90" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M178.57142857142858,342.0642446385358C384.2857142857143,342.0642446385358,384.2857142857143,234.58482611060884,590,234.58482611060884" stroke="url(#linearGradient-90)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-91" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M178.57142857142858,379.6251300954104C384.2857142857143,379.6251300954104,384.2857142857143,390.6540380752116,590,390.6540380752116" stroke="url(#linearGradient-91)" stroke-width="2.455652702869677"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-92" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#4e79a7"></stop></linearGradient><path d="M178.57142857142858,352.40355677359537C384.2857142857143,352.40355677359537,384.2857142857143,323.43246475339646,590,323.43246475339646" stroke="url(#linearGradient-92)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-93" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,91.47802674197196C47.142857142857146,91.47802674197196,47.142857142857146,97.58763489626782,84.28571428571429,97.58763489626782" stroke="url(#linearGradient-93)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-94" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M94.28571428571429,189.3096436817357C131.42857142857144,189.3096436817357,131.42857142857144,148.7595093712397,168.57142857142858,148.7595093712397" stroke="url(#linearGradient-94)" stroke-width="9.089271212090807"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-95" gradientUnits="userSpaceOnUse" x1="10" x2="252.8571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M10,31.047839214447965C131.42857142857144,31.047839214447965,131.42857142857144,35.149794522746824,252.8571428571429,35.149794522746824" stroke="url(#linearGradient-95)" stroke-width="62.09567842889593"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-96" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#ff9da7"></stop></linearGradient><path d="M10,363.39821692024816C47.142857142857146,363.39821692024816,47.142857142857146,360.2560787178014,84.28571428571429,360.2560787178014" stroke="url(#linearGradient-96)" stroke-width="37.279599451262584"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-97" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#9c755f"></stop><stop offset="100%" stop-color="#ff9da7"></stop></linearGradient><path d="M10,396.01900832293984C47.142857142857146,396.01900832293984,47.142857142857146,382.8768701204929,84.28571428571429,382.8768701204929" stroke="url(#linearGradient-97)" stroke-width="7.96198335412044"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-98" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M94.28571428571429,364.23707039486163C131.42857142857144,364.23707039486163,131.42857142857144,358.2321650441537,168.57142857142858,358.2321650441537" stroke="url(#linearGradient-98)" stroke-width="45.241582805383025"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-99" gradientUnits="userSpaceOnUse" x1="10" x2="168.57142857142858"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,156.38399896082058C89.28571428571429,156.38399896082058,89.28571428571429,120.53805327392861,168.57142857142858,120.53805327392861" stroke="url(#linearGradient-99)" stroke-width="4.183214507113203"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-100" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,151.41632546591458C47.142857142857146,151.41632546591458,47.142857142857146,114.08056815961847,84.28571428571429,114.08056815961847" stroke="url(#linearGradient-100)" stroke-width="5.752132482698824"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-101" gradientUnits="userSpaceOnUse" x1="10" x2="590"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,229.94671037415736C300,229.94671037415736,300,167.6164616260067,590,167.6164616260067" stroke="url(#linearGradient-101)" stroke-width="14.269517087847618"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-102" gradientUnits="userSpaceOnUse" x1="10" x2="590"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M10,239.69369553944918C300,239.69369553944918,300,193.48114019324862,590,193.48114019324862" stroke="url(#linearGradient-102)" stroke-width="5.22445324273604"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-103" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="337.14285714285717"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M94.28571428571429,244.2855191424821C215.71428571428572,244.2855191424821,215.71428571428572,239.04826506700937,337.14285714285717,239.04826506700937" stroke="url(#linearGradient-103)" stroke-width="4.428203159570007"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-104" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M94.28571428571429,257.2116328544752C342.14285714285717,257.2116328544752,342.14285714285717,175.4632323021386,590,175.4632323021386" stroke="url(#linearGradient-104)" stroke-width="1.4240242644162375"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-105" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#76b7b2"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M10,257.44613745259534C47.142857142857146,257.44613745259534,47.142857142857146,257.2116328544752,84.28571428571429,257.2116328544752" stroke="url(#linearGradient-105)" stroke-width="1.4240242644162375"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-106" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#76b7b2"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,254.52002374060217C47.142857142857146,254.52002374060217,47.142857142857146,244.2855191424821,84.28571428571429,244.2855191424821" stroke="url(#linearGradient-106)" stroke-width="4.428203159570007"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-107" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M178.57142857142858,128.18359911240591C384.2857142857143,128.18359911240591,384.2857142857143,233.9365746038515,590,233.9365746038515" stroke="url(#linearGradient-107)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-108" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="252.8571428571429"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M178.57142857142858,109.92566084853249C215.71428571428572,109.92566084853249,215.71428571428572,80.98714182726968,252.8571428571429,80.98714182726968" stroke="url(#linearGradient-108)" stroke-width="29.579016180149765"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-109" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,126.43308348300009C384.2857142857143,126.43308348300009,384.2857142857143,99.10656988442021,590,99.10656988442021" stroke="url(#linearGradient-109)" stroke-width="3.435829088785416"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-110" gradientUnits="userSpaceOnUse" x1="262.8571428571429" x2="337.14285714285717"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M262.8571428571429,87.58021227497223C300,87.58021227497223,300,216.89068998788284,337.14285714285717,216.89068998788284" stroke="url(#linearGradient-110)" stroke-width="38.85006985946787"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-111" gradientUnits="userSpaceOnUse" x1="262.8571428571429" x2="590"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M262.8571428571429,33.19635377234103C426.42857142857144,33.19635377234103,426.42857142857144,29.277127632115217,590,29.277127632115217" stroke="url(#linearGradient-111)" stroke-width="58.18879692808434"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-112" gradientUnits="userSpaceOnUse" x1="262.8571428571429" x2="337.14285714285717"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M262.8571428571429,65.22296479081075C300,65.22296479081075,300,66.7964741045817,337.14285714285717,66.7964741045817" stroke="url(#linearGradient-112)" stroke-width="5.8644251088550945"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-113" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,279.02462876266884C173.57142857142858,279.02462876266884,173.57142857142858,242.12884582465986,337.14285714285717,242.12884582465986" stroke="url(#linearGradient-113)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-114" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,108.36731611858049C47.142857142857146,108.36731611858049,47.142857142857146,104.47692427287635,84.28571428571429,104.47692427287635" stroke="url(#linearGradient-114)" stroke-width="13.455155290785411"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-115" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,290.0767714893108C173.57142857142858,290.0767714893108,173.57142857142858,243.18098855130182,337.14285714285717,243.18098855130182" stroke="url(#linearGradient-115)" stroke-width="1.4055429237058572"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-116" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,311.4752862231636C173.57142857142858,311.4752862231636,173.57142857142858,254.5795032851547,337.14285714285717,254.5795032851547" stroke="url(#linearGradient-116)" stroke-width="21.391486543999843"></path></g></g></svg></body></html><figcaption>A Sankey chart generated by Mermaid</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">--- config: sankey: showValues: false --- sankey-beta Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 Biofuel imports,Liquid,35 Biomass imports,Solid,35 Coal imports,Coal,11.606 Coal reserves,Coal,63.965 Coal,Solid,75.571 District heating,Industry,10.639 District heating,Heating and cooling - commercial,22.505 District heating,Heating and cooling - homes,46.184 Electricity grid,Over generation / exports,104.453 Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 Electricity grid,Industry,342.165 Electricity grid,Road transport,37.797 Electricity grid,Agriculture,4.412 Electricity grid,Heating and cooling - commercial,40.858 Electricity grid,Losses,56.691 Electricity grid,Rail transport,7.863 Electricity grid,Lighting & appliances - commercial,90.008 Electricity grid,Lighting & appliances - homes,93.494 Gas imports,NGas,40.719 Gas reserves,NGas,82.233 Gas,Heating and cooling - commercial,0.129 Gas,Losses,1.401 Gas,Thermal generation,151.891 Gas,Agriculture,2.096 Gas,Industry,48.58 Geothermal,Electricity grid,7.013 H2 conversion,H2,20.897 H2 conversion,Losses,6.242 H2,Road transport,20.897 Hydro,Electricity grid,6.995 Liquid,Industry,121.066 Liquid,International shipping,128.69 Liquid,Road transport,135.835 Liquid,Domestic aviation,14.458 Liquid,International aviation,206.267 Liquid,Agriculture,3.64 Liquid,National navigation,33.218 Liquid,Rail transport,4.413 Marine algae,Bio-conversion,4.375 NGas,Gas,122.952 Nuclear,Thermal generation,839.978 Oil imports,Oil,504.287 Oil reserves,Oil,107.703 Oil,Liquid,611.99 Other waste,Solid,56.587 Other waste,Bio-conversion,77.81 Pumped heat,Heating and cooling - homes,193.026 Pumped heat,Heating and cooling - commercial,70.672 Solar PV,Electricity grid,59.901 Solar Thermal,Heating and cooling - homes,19.263 Solar,Solar Thermal,19.263 Solar,Solar PV,59.901 Solid,Agriculture,0.882 Solid,Thermal generation,400.12 Solid,Industry,46.477 Thermal generation,Electricity grid,525.531 Thermal generation,Losses,787.129 Thermal generation,District heating,79.329 Tidal,Electricity grid,9.452 UK land based bioenergy,Bio-conversion,182.01 Wave,Electricity grid,19.013 Wind,Electricity grid,289.366</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-pie-chart" tabindex="-1">Mermaid Pie Chart</h3> <p>Other examples are the xy chart or the pie chart. Those charts can be useful, but they are fairly simple and some might find they are not polished enough. The syntax isn't consistent either. The xy chart requires a title to be in double quotes to avoid having all spaces removed from the title text, while for the pie chart double quotes are supported, but the title would be better without quotes because the quotes are rendered into the diagram. Also, the titles of the two diagram types are rendered in different font sizes. Generally, font sizes vary across the different Mermaid chart types. At the beginning of this document I mentioned standardized output creation from text definitions is a benefit of text-to-chart, but it is not to 100% achieved in this case. It is a probably a minor complaint, depending on your context, but I expect these things to be aligned when using a charting software.</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-gijykswpynhl" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 573.2783203125 450" style="max-width: 573.2783203125px;" role="graphics-document document" aria-roledescription="pie"><style>#mermaid-gijykswpynhl{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-gijykswpynhl .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-gijykswpynhl .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-gijykswpynhl .error-icon{fill:#552222;}#mermaid-gijykswpynhl .error-text{fill:#552222;stroke:#552222;}#mermaid-gijykswpynhl .edge-thickness-normal{stroke-width:1px;}#mermaid-gijykswpynhl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-gijykswpynhl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-gijykswpynhl .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-gijykswpynhl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-gijykswpynhl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-gijykswpynhl .marker{fill:#333333;stroke:#333333;}#mermaid-gijykswpynhl .marker.cross{stroke:#333333;}#mermaid-gijykswpynhl svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-gijykswpynhl p{margin:0;}#mermaid-gijykswpynhl .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-gijykswpynhl .pieOuterCircle{stroke:black;stroke-width:2px;fill:none;}#mermaid-gijykswpynhl .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:arial,sans-serif;}#mermaid-gijykswpynhl .slice{font-family:arial,sans-serif;fill:#333;font-size:17px;}#mermaid-gijykswpynhl .legend text{fill:black;font-family:arial,sans-serif;font-size:17px;}#mermaid-gijykswpynhl :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g transform="translate(225,225)"><circle cx="0" cy="0" r="186" class="pieOuterCircle"></circle><path d="M0,-185A185,185,0,1,1,-108.74,-149.668L0,0Z" fill="#ECECFF" class="pieCircle"></path><path d="M-108.74,-149.668A185,185,0,0,1,-46.008,-179.188L0,0Z" fill="#ffffde" class="pieCircle"></path><path d="M-46.008,-179.188A185,185,0,0,1,0,-185L0,0Z" fill="hsl(80, 100%, 56.2745098039%)" class="pieCircle"></path><text transform="translate(42.87610796952391,131.95909163595257)" class="slice" style="text-anchor: middle;">90%</text><text transform="translate(-59.07687670465376,-125.54475352966024)" class="slice" style="text-anchor: middle;">6%</text><text transform="translate(-17.389986157047144,-137.6559148073838)" class="slice" style="text-anchor: middle;">4%</text><text x="0" y="-200" class="pieTitleText">What Voldemort doesn't have?</text><g class="legend" transform="translate(216,-33)"><rect width="18" height="18" style="fill: rgb(181, 255, 32); stroke: rgb(181, 255, 32);"></rect><text x="22" y="14">Friends</text></g><g class="legend" transform="translate(216,-11)"><rect width="18" height="18" style="fill: rgb(255, 255, 222); stroke: rgb(255, 255, 222);"></rect><text x="22" y="14">Family</text></g><g class="legend" transform="translate(216,11)"><rect width="18" height="18" style="fill: rgb(236, 236, 255); stroke: rgb(236, 236, 255);"></rect><text x="22" y="14">Nose</text></g></g></svg></body></html><figcaption>A simple pie chart generated by Mermaid</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">pie title What Voldemort doesn't have? "Friends" : 2 "Family" : 3 "Nose" : 45</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-xy-chart" tabindex="-1">Mermaid XY Chart</h3> <figure class="mermaid"><html><head></head><body><svg id="mermaid-wyvqrztiinhl" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 700px;" viewBox="0 0 700 500" role="graphics-document document" aria-roledescription="xychart"><style>#mermaid-wyvqrztiinhl{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-wyvqrztiinhl .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-wyvqrztiinhl .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-wyvqrztiinhl .error-icon{fill:#552222;}#mermaid-wyvqrztiinhl .error-text{fill:#552222;stroke:#552222;}#mermaid-wyvqrztiinhl .edge-thickness-normal{stroke-width:1px;}#mermaid-wyvqrztiinhl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-wyvqrztiinhl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-wyvqrztiinhl .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-wyvqrztiinhl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-wyvqrztiinhl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-wyvqrztiinhl .marker{fill:#333333;stroke:#333333;}#mermaid-wyvqrztiinhl .marker.cross{stroke:#333333;}#mermaid-wyvqrztiinhl svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-wyvqrztiinhl p{margin:0;}#mermaid-wyvqrztiinhl :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g class="main"><rect width="700" height="500" class="background" fill="white"></rect><g class="chart-title"><text x="0" y="0" fill="#131300" font-size="20" dominant-baseline="middle" text-anchor="middle" transform="translate(350, 22) rotate(0)">The week in data</text></g><g class="plot"><g class="bar-plot-0"><rect x="74.18437690734864" y="396.12263977302695" width="55.099999999999994" height="41.87735831962442" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="169.06198075612383" y="413.95282836230297" width="55.099999999999994" height="24.0471697303484" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="263.93958460489904" y="429.99999809265137" width="55.099999999999994" height="8" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="358.8171884536743" y="413.95282836230297" width="55.099999999999994" height="24.0471697303484" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="453.6947923024495" y="406.82075292659255" width="55.099999999999994" height="31.17924516605882" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="548.5723961512248" y="396.12263977302695" width="55.099999999999994" height="41.87735831962442" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="643.45" y="399.6886774908821" width="55.099999999999994" height="38.31132060176924" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect></g><g class="line-plot-1"><path d="M101.734,396.123L196.612,342.632L291.49,305.189L386.367,251.698L481.245,191.075L576.122,119.755L671,52" fill="none" stroke="#8493A6" stroke-width="2"></path></g></g><g class="bottom-axis"><g class="axis-line"><path d="M 72.73437690734863,438.99999809265137 L 700,438.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="label"><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(101.73437690734863, 449.99999809265137) rotate(0)">Mon</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(196.61198075612384, 449.99999809265137) rotate(0)">Tue</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(291.48958460489905, 449.99999809265137) rotate(0)">Wed</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(386.3671884536743, 449.99999809265137) rotate(0)">Thu</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(481.2447923024495, 449.99999809265137) rotate(0)">Fri</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(576.1223961512247, 449.99999809265137) rotate(0)">Sat</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(671, 449.99999809265137) rotate(0)">Sun</text></g><g class="ticks"><path d="M 101.73437690734863,439.99999809265137 L 101.73437690734863,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 196.61198075612384,439.99999809265137 L 196.61198075612384,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 291.48958460489905,439.99999809265137 L 291.48958460489905,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 386.3671884536743,439.99999809265137 L 386.3671884536743,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 481.2447923024495,439.99999809265137 L 481.2447923024495,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 576.1223961512247,439.99999809265137 L 576.1223961512247,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 671,439.99999809265137 L 671,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="title"><text x="0" y="0" fill="#131300" font-size="16" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(386.3671884536743, 475.99999809265137) rotate(0)">Days of the week</text></g></g><g class="left-axis"><g class="axisl-line"><path d="M 71.73437690734863,44 L 71.73437690734863,437.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="label"><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 75.17924516605882) rotate(0)">220</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 110.83962234461083) rotate(0)">200</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 146.49999952316284) rotate(0)">180</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 182.16037670171485) rotate(0)">160</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 217.82075388026686) rotate(0)">140</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 253.48113105881887) rotate(0)">120</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 289.14150823737094) rotate(0)">100</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 324.8018854159229) rotate(0)">80</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 360.46226259447496) rotate(0)">60</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 396.12263977302695) rotate(0)">40</text></g><g class="ticks"><path d="M 70.73437690734863,75.17924516605882 L 65.73437690734863,75.17924516605882" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,110.83962234461083 L 65.73437690734863,110.83962234461083" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,146.49999952316284 L 65.73437690734863,146.49999952316284" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,182.16037670171485 L 65.73437690734863,182.16037670171485" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,217.82075388026686 L 65.73437690734863,217.82075388026686" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,253.48113105881887 L 65.73437690734863,253.48113105881887" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,289.14150823737094 L 65.73437690734863,289.14150823737094" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,324.8018854159229 L 65.73437690734863,324.8018854159229" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,360.46226259447496 L 65.73437690734863,360.46226259447496" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,396.12263977302695 L 65.73437690734863,396.12263977302695" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="title"><text x="0" y="0" fill="#131300" font-size="16" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(5, 240.99999904632568) rotate(270)">Data</text></g></g></g><g class="mermaid-tmp-group"></g></svg></body></html><figcaption>A simple xy chart generated by Mermaid. The bars represent data points for each day of the week. The line represents the cumulated data points from day to day. This visualization is clear as long as you have a single data series to visualize (like only bars, or only the line). When having more than one data series, I'm missing an automatically generated legend to explain the data within the chart. The explanation can only be given in addition to what Mermaid does, for example by putting your own description as some sort of legend into a <code>figcaption</code>, which is not ideal in my view. A legend should really be part of any information graphic.</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">xychart-beta title "The week in data" x-axis "Days of the week" [Mon, Tue, Wed, Thu, Fri, Sat, Sun] y-axis "Data" bar "Per day" [40, 30, 21, 30, 34, 40, 38] line "Cumulated over days" [40, 70, 91, 121, 155, 195, 233]</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-chart-appearance" tabindex="-1">Mermaid Chart Appearance</h3> <p>The appearance of each Mermaid chart can be configured through a frontmatter configuration within the chart definition, see <a href="https://mermaid.js.org/config/configuration.html#frontmatter-config"><cite>Frontmatter config</cite></a> in the Mermaid documentation. In addition, a software developer can apply a custom styling to all diagrams by using a Mermaid config object and a theme CSS.</p> <p>The application of styles to the diagrams is inconsistent, not well documented, and I didn't find it straight forward. For example, you can set the colors of the bars and lines for the xy chart in the Mermaid config object (which is JSON), but the background of the xy chart needs to be set via the theme CSS. At some point I refrained from doing my own styling and now I just use the default. Unfortunately that means I do not have a dark mode switch, because Mermaid is not supporting an automatic switch by reacting to system settings out of the box, and the font size of the data series legends is too tiny, but I have to accept that.</p> <p>In the end, the limitations of Mermaid's general purpose charts made me watch out for other solutions and I came to ECharts.</p> <h2 id="echarts" tabindex="-1">ECharts</h2> <p>ECharts is a free and capable charting software under the Apache License 2.0. It covers general purpose charts in various flavours and can be used for specific charts that go well beyond of what I would expect to get from a charting software. The charts are rendered on the client and can be interactive in the sense that users are able to filter out certain data series to shift focus on other data series to better analyze the data.</p> <p>I'm impressed by the <a href="https://echarts.apache.org/examples/index.html">ECharts demo page</a>.</p> <p>Other than Mermaid, ECharts does not rely on text to describe a chart. Instead the chart has to be defined with JavaScript. It's a steeper learning curve, but the concepts are well thought through, pretty flexible, and the resulting charts can be tailored to certain needs much better than with Mermaid. To directly jump in, let's pick up some chart types we rendered previously with Mermaid and do the same with ECharts.</p> <h3 id="echarts-pie-chart" tabindex="-1">ECharts Pie Chart</h3> <figure id="echarts-rwhaxyckuemz" class="echarts"> <div id="echarts-ufixvxkdlizv" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-ufixvxkdlizv"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { title: { text: 'What Voldemort doesn't have', }, figcaption: `A simple pie chart rendered by ECharts. You will probably notice it's more interactive, more polished, and much closer to the styling of the hosting website than the corresponding Mermaid chart.`, tooltip: { trigger: 'item' }, series: [ { type: 'pie', radius: containerWidth > 600 ? '70%' : '50%', data: [ { value: 2, name: 'Friends' }, { value: 3, name: 'Family' }, { value: 45, name: 'Nose' } ], label: { show: true, formatter: containerWidth > 600 ? '{b}: {c} ≈ {d}%' : '{b} {c}' // {b} = data name // {c} = raw value // {d} = percentage } } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-ufixvxkdlizv"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-rwhaxyckuemz"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">const config = { title: { text: 'What Voldemort doesn't have', }, tooltip: { trigger: 'item' }, series: [ { type: 'pie', radius: containerWidth > 600 ? '70%' : '50%', data: [ { value: 2, name: 'Friends' }, { value: 3, name: 'Family' }, { value: 45, name: 'Nose' } ], label: { show: true, formatter: containerWidth > 600 ? '{b}: {c} ≈ {d}%' : '{b} {c}' // {b} = data name // {c} = raw value // {d} = percentage } } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-xy-chart" tabindex="-1">ECharts XY Chart</h3> <figure id="echarts-ydcjztaxkvhq" class="echarts"> <div id="echarts-isshxxhxfies" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-isshxxhxfies"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { title: { text: 'The week in data', }, figcaption: `The ECharts version of the xy chart, which is named a combined line/bar chart in ECharts. It's easy to have a proper legend for the visualized data, and again, the chart is interactive.`, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: containerWidth > 600 ? 'Days of the week': '' }, yAxis: { type: 'value', name: containerWidth > 600 ? 'Data' : '' }, legend: { data: ['Per day', 'Cumulated over days'] }, series: [ { name: 'Per day', data: [40, 30, 21, 30, 34, 40, 38], type: 'bar' }, { name: 'Cumulated over days', data: [40, 70, 91, 121, 155, 195, 233], type: 'line' } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-isshxxhxfies"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-ydcjztaxkvhq"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">const config = { title: { text: 'The week in data', }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: containerWidth > 600 ? 'Days of the week' : '' }, yAxis: { type: 'value', name: containerWidth > 600 ? 'Data' : '' }, legend: { data: ['Per day', 'Cumulated over days'] }, series: [ { name: 'Per day', data: [40, 30, 21, 30, 34, 40, 38], type: 'bar' }, { name: 'Cumulated over days', data: [40, 70, 91, 121, 155, 195, 233], type: 'line' } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-radar-chart" tabindex="-1">ECharts Radar Chart</h3> <figure id="echarts-qeuxwzhzemcp" class="echarts"> <div id="echarts-iqgcnuugemtd" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-iqgcnuugemtd"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { figcaption: 'The radar chart, generated by ECharts', legend: { data: ['Alice', 'Bob'] }, radar: { splitLine: { show: false }, splitArea: { show: false }, indicator: [ { name: 'Math', max: 100 }, { name: 'Science', max: 100 }, { name: 'English', max: 100 }, { name: 'History', max: 100 }, { name: 'Geography', max: 100 }, { name: 'Art', max: 100 } ] }, series: [ { type: 'radar', data: [ { value: [85, 90, 80, 70, 75, 90], name: 'Alice' }, { value: [70, 75, 85, 80, 90, 85], name: 'Bob' } ] } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-iqgcnuugemtd"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-qeuxwzhzemcp"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">const config = { legend: { data: ['Alice', 'Bob'] }, radar: { splitLine: { show: false }, splitArea: { show: false }, indicator: [ { name: 'Math', max: 100 }, { name: 'Science', max: 100 }, { name: 'English', max: 100 }, { name: 'History', max: 100 }, { name: 'Geography', max: 100 }, { name: 'Art', max: 100 } ] }, series: [ { type: 'radar', data: [ { value: [85, 90, 80, 70, 75, 90], name: 'Alice' }, { value: [70, 75, 85, 80, 90, 85], name: 'Bob' } ] } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-sankey-chart" tabindex="-1">ECharts Sankey Chart</h3> <figure id="echarts-bjkwyfmtsvfx" class="echarts"> <div id="echarts-lpvrfsogsiwn" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-lpvrfsogsiwn"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { figcaption: 'The Sankey chart, generated by ECharts', tooltip: { trigger: "item", triggerOn: "mousemove", }, animation: true, series: [ { type: "sankey", bottom: "10%", emphasis: { focus: "adjacency", }, data: [ { name: "Agricultural 'waste'", }, { name: "Bio-conversion" }, { name: "Biofuel imports" }, { name: "Biomass imports" }, { name: "Coal imports" }, { name: "Coal reserves" }, { name: "Coal" }, { name: "District heating", }, { name: "Electricity grid", }, { name: "Gas imports" }, { name: "Gas reserves" }, { name: "Gas", }, { name: "Geothermal" }, { name: "H2 conversion" }, { name: "H2" }, { name: "Hydro" }, { name: "Liquid" }, { name: "Marine algae" }, { name: "NGas" }, { name: "Nuclear" }, { name: "Oil imports" }, { name: "Oil reserves" }, { name: "Oil" }, { name: "Other waste" }, { name: "Pumped heat", }, { name: "Solar PV" }, { name: "Solar Thermal", }, { name: "Solar" }, { name: "Thermal generation", }, { name: "Tidal" }, { name: "UK land based bioenergy", }, { name: "Wave" }, { name: "Wind" }, ], links: [ { source: "Agricultural 'waste'", target: "Bio-conversion", value: 124.729, }, { source: "Bio-conversion", target: "Liquid", value: 0.597 }, { source: "Bio-conversion", target: "Losses", value: 26.862 }, { source: "Bio-conversion", target: "Solid", value: 280.322 }, { source: "Bio-conversion", target: "Gas", value: 81.144 }, { source: "Biofuel imports", target: "Liquid", value: 35 }, { source: "Biomass imports", target: "Solid", value: 35 }, { source: "Coal imports", target: "Coal", value: 11.606 }, { source: "Coal reserves", target: "Coal", value: 63.965 }, { source: "Coal", target: "Solid", value: 75.571 }, { source: "District heating", target: "Industry", value: 10.639 }, { source: "District heating", target: "Heating and cooling - commercial", value: 22.505, }, { source: "District heating", target: "Heating and cooling - homes", value: 46.184, }, { source: "Electricity grid", target: "Over generation / exports", value: 104.453, }, { source: "Electricity grid", target: "Heating and cooling - homes", value: 113.726, }, { source: "Electricity grid", target: "H2 conversion", value: 27.14 }, { source: "Electricity grid", target: "Industry", value: 342.165 }, { source: "Electricity grid", target: "Road transport", value: 37.797 }, { source: "Electricity grid", target: "Agriculture", value: 4.412 }, { source: "Electricity grid", target: "Heating and cooling - commercial", value: 40.858, }, { source: "Electricity grid", target: "Losses", value: 56.691 }, { source: "Electricity grid", target: "Rail transport", value: 7.863 }, { source: "Electricity grid", target: "Lighting & appliances - commercial", value: 90.008, }, { source: "Electricity grid", target: "Lighting & appliances - homes", value: 93.494, }, { source: "Gas imports", target: "NGas", value: 40.719 }, { source: "Gas reserves", target: "NGas", value: 82.233 }, { source: "Gas", target: "Heating and cooling - commercial", value: 0.129, }, { source: "Gas", target: "Losses", value: 1.401 }, { source: "Gas", target: "Thermal generation", value: 151.891 }, { source: "Gas", target: "Agriculture", value: 2.096 }, { source: "Gas", target: "Industry", value: 48.58 }, { source: "Geothermal", target: "Electricity grid", value: 7.013 }, { source: "H2 conversion", target: "H2", value: 20.897 }, { source: "H2 conversion", target: "Losses", value: 6.242 }, { source: "H2", target: "Road transport", value: 20.897 }, { source: "Hydro", target: "Electricity grid", value: 6.995 }, { source: "Liquid", target: "Industry", value: 121.066 }, { source: "Liquid", target: "International shipping", value: 128.69 }, { source: "Liquid", target: "Road transport", value: 135.835 }, { source: "Liquid", target: "Domestic aviation", value: 14.458 }, { source: "Liquid", target: "International aviation", value: 206.267 }, { source: "Liquid", target: "Agriculture", value: 3.64 }, { source: "Liquid", target: "National navigation", value: 33.218 }, { source: "Liquid", target: "Rail transport", value: 4.413 }, { source: "Marine algae", target: "Bio-conversion", value: 4.375 }, { source: "NGas", target: "Gas", value: 122.952 }, { source: "Nuclear", target: "Thermal generation", value: 839.978 }, { source: "Oil imports", target: "Oil", value: 504.287 }, { source: "Oil reserves", target: "Oil", value: 107.703 }, { source: "Oil", target: "Liquid", value: 611.99 }, { source: "Other waste", target: "Solid", value: 56.587 }, { source: "Other waste", target: "Bio-conversion", value: 77.81 }, { source: "Pumped heat", target: "Heating and cooling - homes", value: 193.026, }, { source: "Pumped heat", target: "Heating and cooling - commercial", value: 70.672, }, { source: "Solar PV", target: "Electricity grid", value: 59.901 }, { source: "Solar Thermal", target: "Heating and cooling - homes", value: 19.263, }, { source: "Solar", target: "Solar Thermal", value: 19.263 }, { source: "Solar", target: "Solar PV", value: 59.901 }, { source: "Solid", target: "Agriculture", value: 0.882 }, { source: "Solid", target: "Thermal generation", value: 400.12 }, { source: "Solid", target: "Industry", value: 46.477 }, { source: "Thermal generation", target: "Electricity grid", value: 525.531, }, { source: "Thermal generation", target: "Losses", value: 787.129 }, { source: "Thermal generation", target: "District heating", value: 79.329, }, { source: "Tidal", target: "Electricity grid", value: 9.452 }, { source: "UK land based bioenergy", target: "Bio-conversion", value: 182.01, }, { source: "Wave", target: "Electricity grid", value: 19.013 }, { source: "Wind", target: "Electricity grid", value: 289.366 }, ], label: { position: "top", fontSize: 10, lineHeight: 12, align: 'left' }, nodeGap: 20, lineStyle: { color: "source", curveness: 0.5, }, }, ], }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-lpvrfsogsiwn"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-bjkwyfmtsvfx"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">charts</span> <span class="token code-block language-charts language-charts language-charts">const config = { tooltip: { trigger: "item", triggerOn: "mousemove", }, animation: true, series: [ { type: "sankey", bottom: "10%", emphasis: { focus: "adjacency", }, data: [ { name: "Agricultural 'waste'", }, { name: "Bio-conversion" }, { name: "Biofuel imports" }, { name: "Biomass imports" }, { name: "Coal imports" }, { name: "Coal reserves" }, { name: "Coal" }, { name: "District heating", }, { name: "Electricity grid", }, { name: "Gas imports" }, { name: "Gas reserves" }, { name: "Gas", }, { name: "Geothermal" }, { name: "H2 conversion" }, { name: "H2" }, { name: "Hydro" }, { name: "Liquid" }, { name: "Marine algae" }, { name: "NGas" }, { name: "Nuclear" }, { name: "Oil imports" }, { name: "Oil reserves" }, { name: "Oil" }, { name: "Other waste" }, { name: "Pumped heat", }, { name: "Solar PV" }, { name: "Solar Thermal", }, { name: "Solar" }, { name: "Thermal generation", }, { name: "Tidal" }, { name: "UK land based bioenergy", }, { name: "Wave" }, { name: "Wind" }, ], links: [ { source: "Agricultural 'waste'", target: "Bio-conversion", value: 124.729, }, { source: "Bio-conversion", target: "Liquid", value: 0.597 }, { source: "Bio-conversion", target: "Losses", value: 26.862 }, { source: "Bio-conversion", target: "Solid", value: 280.322 }, { source: "Bio-conversion", target: "Gas", value: 81.144 }, { source: "Biofuel imports", target: "Liquid", value: 35 }, { source: "Biomass imports", target: "Solid", value: 35 }, { source: "Coal imports", target: "Coal", value: 11.606 }, { source: "Coal reserves", target: "Coal", value: 63.965 }, { source: "Coal", target: "Solid", value: 75.571 }, { source: "District heating", target: "Industry", value: 10.639 }, { source: "District heating", target: "Heating and cooling - commercial", value: 22.505, }, { source: "District heating", target: "Heating and cooling - homes", value: 46.184, }, { source: "Electricity grid", target: "Over generation / exports", value: 104.453, }, { source: "Electricity grid", target: "Heating and cooling - homes", value: 113.726, }, { source: "Electricity grid", target: "H2 conversion", value: 27.14 }, { source: "Electricity grid", target: "Industry", value: 342.165 }, { source: "Electricity grid", target: "Road transport", value: 37.797 }, { source: "Electricity grid", target: "Agriculture", value: 4.412 }, { source: "Electricity grid", target: "Heating and cooling - commercial", value: 40.858, }, { source: "Electricity grid", target: "Losses", value: 56.691 }, { source: "Electricity grid", target: "Rail transport", value: 7.863 }, { source: "Electricity grid", target: "Lighting & appliances - commercial", value: 90.008, }, { source: "Electricity grid", target: "Lighting & appliances - homes", value: 93.494, }, { source: "Gas imports", target: "NGas", value: 40.719 }, { source: "Gas reserves", target: "NGas", value: 82.233 }, { source: "Gas", target: "Heating and cooling - commercial", value: 0.129, }, { source: "Gas", target: "Losses", value: 1.401 }, { source: "Gas", target: "Thermal generation", value: 151.891 }, { source: "Gas", target: "Agriculture", value: 2.096 }, { source: "Gas", target: "Industry", value: 48.58 }, { source: "Geothermal", target: "Electricity grid", value: 7.013 }, { source: "H2 conversion", target: "H2", value: 20.897 }, { source: "H2 conversion", target: "Losses", value: 6.242 }, { source: "H2", target: "Road transport", value: 20.897 }, { source: "Hydro", target: "Electricity grid", value: 6.995 }, { source: "Liquid", target: "Industry", value: 121.066 }, { source: "Liquid", target: "International shipping", value: 128.69 }, { source: "Liquid", target: "Road transport", value: 135.835 }, { source: "Liquid", target: "Domestic aviation", value: 14.458 }, { source: "Liquid", target: "International aviation", value: 206.267 }, { source: "Liquid", target: "Agriculture", value: 3.64 }, { source: "Liquid", target: "National navigation", value: 33.218 }, { source: "Liquid", target: "Rail transport", value: 4.413 }, { source: "Marine algae", target: "Bio-conversion", value: 4.375 }, { source: "NGas", target: "Gas", value: 122.952 }, { source: "Nuclear", target: "Thermal generation", value: 839.978 }, { source: "Oil imports", target: "Oil", value: 504.287 }, { source: "Oil reserves", target: "Oil", value: 107.703 }, { source: "Oil", target: "Liquid", value: 611.99 }, { source: "Other waste", target: "Solid", value: 56.587 }, { source: "Other waste", target: "Bio-conversion", value: 77.81 }, { source: "Pumped heat", target: "Heating and cooling - homes", value: 193.026, }, { source: "Pumped heat", target: "Heating and cooling - commercial", value: 70.672, }, { source: "Solar PV", target: "Electricity grid", value: 59.901 }, { source: "Solar Thermal", target: "Heating and cooling - homes", value: 19.263, }, { source: "Solar", target: "Solar Thermal", value: 19.263 }, { source: "Solar", target: "Solar PV", value: 59.901 }, { source: "Solid", target: "Agriculture", value: 0.882 }, { source: "Solid", target: "Thermal generation", value: 400.12 }, { source: "Solid", target: "Industry", value: 46.477 }, { source: "Thermal generation", target: "Electricity grid", value: 525.531, }, { source: "Thermal generation", target: "Losses", value: 787.129 }, { source: "Thermal generation", target: "District heating", value: 79.329, }, { source: "Tidal", target: "Electricity grid", value: 9.452 }, { source: "UK land based bioenergy", target: "Bio-conversion", value: 182.01, }, { source: "Wave", target: "Electricity grid", value: 19.013 }, { source: "Wind", target: "Electricity grid", value: 289.366 }, ], label: { position: "top", fontSize: 10, lineHeight: 12, align: 'left' }, nodeGap: 20, lineStyle: { color: "source", curveness: 0.5, }, }, ], };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-large-area-chart" tabindex="-1">ECharts Large Area Chart</h3> <p>The large area chart, with its level of interaction, is a case where ECharts shines. I add it here to highlight what ECharts can do.</p> <figure id="echarts-ydqfixyqxplh" class="echarts"> <div id="echarts-zfrastpaceej" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-zfrastpaceej"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (let i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } const config = { figcaption: 'A large area chart, generated by ECharts', tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [ { type: 'inside', start: 0, end: 10 }, { start: 0, end: 10 } ], series: [ { name: 'Fake Data', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' } ]) }, data: data } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-zfrastpaceej"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-ydqfixyqxplh"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (let i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } const config = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [ { type: 'inside', start: 0, end: 10 }, { start: 0, end: 10 } ], series: [ { name: 'Fake Data', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' } ]) }, data: data } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h2 id="conclusion" tabindex="-1">Conclusion</h2> <p>Mermaid works well and allows to be quick with charts that fit into the software development domain. Though it is possible to influence the styling of the diagrams, it's not straight-forward enough in my view so that I refrain from doing any custom styling and instead use the default Mermaid styles. I enjoy getting a proper flowchart from a few lines of text and being able to change the chart with ease. This is a good example for the power of text-to-chart when the chart syntax fits its context.</p> <p>ECharts is my go-to choice for general purpose charts. The concepts are powerful yet simple enough, the results are beautiful, interactive, and can be styled to a certain look, including a dark-mode switch. The ECharts approach of enhancing accessibility by the automatic generation of aria-labels from the data shown is a smart move and a big plus on the feature list. I'm impressed of what is doable with this charting library.</p>

Text-to-Chart appeared on ulfschneider.io.

Reply via email

Mermaid online editor 2025-08-16T07:49:45Z https://ulfschneider.io/2025-08-16-mermaid-online-editor/ <p><a href="https://mermaid.live"><cite>mermaid.live</cite></a> is the online editor for Mermaid charts.</p>

Mermaid online editor appeared on ulfschneider.io.

Reply via email

ECharts online editor 2025-08-16T07:49:45Z https://ulfschneider.io/2025-08-16-echarts-online-editor/ <p><a href="https://echarts.apache.org/examples/editor.html"><cite>echarts.apache.org/examples/editor.html</cite></a> is the online editor for ECharts.</p>

ECharts online editor appeared on ulfschneider.io.

Reply via email

mermaid-cli-batch 2025-08-10T15:11:38Z https://ulfschneider.io/tools/mermaid-cli-batch/ <p>A command line tool to process multiple diagrams in one pass into SVG images.</p> <p><a href="https://www.npmjs.com/package/mermaid-cli-batch"><cite>mermaid-cli-batch</cite></a> is a npm/node based command-line tool to process <a href="https://mermaid.js.org">Mermaid</a> diagram definition files in batches. For instance, to convert all <code>.mmd</code> files to SVG images, run the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">npx mermaid-cli-batch <span class="token parameter variable">--input</span> *.mmd</code></pre> <p>List possible tool settings by issuing the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">npx mermaid-cli-batch <span class="token parameter variable">-h</span></code></pre> <p>mermaid-cli-batch has a peer dependency to Playwright that you have to install by yourself prior of using the package:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token function">npm</span> i playwright npx playwright <span class="token function">install</span> chromium</code></pre> <p>This allows you to update playwright independently of mermaid-cli-batch!</p>

mermaid-cli-batch appeared on ulfschneider.io.

Reply via email

markdown-it-responsive-echarts 2025-08-10T12:45:00Z https://ulfschneider.io/tools/markdown-it-responsive-echarts/ <p>A plugin to render <a href="https://echarts.apache.org/">ECharts</a> with markdown-it.</p> <p><a href="https://www.npmjs.com/package/markdown-it-responsive-echarts"><cite>markdown-it-responsive-echarts</cite></a> enhances your Markdown capabilities by instantiating interactive and responsive <a href="https://echarts.apache.org/">ECharts</a> that can react to light mode and dark mode.</p> <p>Install the plugin with</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token function">npm</span> <span class="token function">install</span> markdown-it-responsive-echarts</code></pre> <p>and add it to your markdown-it setup</p> <pre class="language-js" data-language="JavaScript"><code class="language-js"><span class="token keyword">import</span> markdownItECharts <span class="token keyword">from</span> <span class="token string">'markdown-it-responsive-echarts'</span> <span class="token keyword">import</span> markdownIt <span class="token keyword">from</span> <span class="token string">'markdown-it'</span> <span class="token keyword">const</span> md <span class="token operator">=</span> <span class="token function">markdownIt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> md<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>markdownItECharts<span class="token punctuation">)</span></code></pre> <p>to render charts like the one below.</p> <p>Visit the <a href="https://www.npmjs.com/package/markdown-it-responsive-echarts">plugin page</a> to learn about the configuration options.</p> <figure id="echarts-yyadzlxcyxtb" class="echarts"> <div id="echarts-mnunbgcatqdy" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-mnunbgcatqdy"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config var xAxisData = []; var data1 = []; var data2 = []; for (var i = 0; i < 100; i++) { xAxisData.push('A' + i); data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); } const config = { figcaption: "An EChart rendered with markdown-it-interactive-echarts. The chart definition is taken from the ECharts example titled <a href='https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay'><cite>Bar Animation Delay</cite></a>.", title: { text: 'Bar Animation Delay' }, legend: { data: ['bar', 'bar2'] }, toolbox: { // y: 'bottom', feature: { magicType: { type: ['stack'] }, dataView: {}, saveAsImage: { pixelRatio: 2 } } }, tooltip: {}, xAxis: { data: xAxisData, splitLine: { show: false } }, yAxis: {}, series: [ { name: 'bar', type: 'bar', data: data1, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10; } }, { name: 'bar2', type: 'bar', data: data2, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10 + 100; } } ], animationEasing: 'elasticOut', animationDelayUpdate: function (idx) { return idx * 5; } }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-mnunbgcatqdy"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-yyadzlxcyxtb"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><p>The above chart is generated by putting the below chart definition into a fenced code block inside of your Markdown text. The fenced code block must be introduced by the identifier <code>echarts</code>.</p> <blockquote class="markdown-alert markdown-alert-note"><p class="markdown-alert-title" style="display: flex; align-items: center;"><svg class="octicon octicon-info" fill="currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Note</p><p>It is mandatory to create an object named <code>config</code> that holds your chart definition. You cannot choose a different name!</p> </blockquote> <pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">var xAxisData = []; var data1 = []; var data2 = []; for (var i = 0; i < 100; i++) { xAxisData.push('A' + i); data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); } //your chart definition must be stored in an object named config //you cannot choose a different name const config = { figcaption: "An EChart rendered with markdown-it-interactive-echarts. The chart definition is taken from the ECharts example titled <a href='https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay'><cite>Bar Animation Delay</cite></a>.", title: { text: 'Bar Animation Delay' }, legend: { data: ['bar', 'bar2'] }, toolbox: { // y: 'bottom', feature: { magicType: { type: ['stack'] }, dataView: {}, saveAsImage: { pixelRatio: 2 } } }, tooltip: {}, xAxis: { data: xAxisData, splitLine: { show: false } }, yAxis: {}, series: [ { name: 'bar', type: 'bar', data: data1, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10; } }, { name: 'bar2', type: 'bar', data: data2, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10 + 100; } } ], animationEasing: 'elasticOut', animationDelayUpdate: function (idx) { return idx * 5; } };</span> <span class="token punctuation">```</span></span></code></pre>

markdown-it-responsive-echarts appeared on ulfschneider.io.

Reply via email

Tosbot 2026-04-26T18:30:13Z https://ulfschneider.io/2025-07-28-tosbot/ <p>Wie Emil Deutsch lernte.</p> <blockquote class="markdown-alert markdown-alert-note"><p class="markdown-alert-title" style="display: flex; align-items: center;"><svg class="octicon octicon-info" fill="currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Note</p><p>The following text is in German language, because it relies heavily on the sound and the understanding of the German language.</p> </blockquote> <p>Während Emil, als er noch ganz jung war, die Deutsche Sprache erlernte, hat er die Worte zunächst auf seine eigene Art benutzt. Diese wunderbaren Wortschöpfungen habe ich damals notiert, und heute, Jahre später, sind sie mir wieder in die Hände gefallen.</p> <p>Ein Tosbot war ein Toastbrot, ein Sinebot ein Rosinenbrötchen, ein Meeresriegel ein Fischstäbchen, und Pustewaff war Hustensaft. Viele dieser ersten Worte hatten verständlicherweise mit Essen zu tun.</p> <ul> <li>Abtöpfen = Abschöpfen</li> <li>Aschemädchen = Aschenputtel</li> <li>Aussaedata = Ausserirdischer</li> <li>Bate = Banane</li> <li>Beihuckter Hitter = Verrückter Ritter</li> <li>Beta = Tablette</li> <li>Bissen = Bisschen</li> <li>Bock = Bockwurst</li> <li>Botsen = Brötchen</li> <li>Bruder Japuk = Bruder Jakob</li> <li>Butuliert = Tätowiert</li> <li>Das butzelt = Das brutzelt</li> <li>Dinsaur = Dinosaurier</li> <li>Duß = Tschüss</li> <li>Emiauch = Emil auch</li> <li>Erbsefrau = Prinzessin auf der Erbse</li> <li>Fak = Quark</li> <li>Fanz = Schwanz</li> <li>Fetzelat = Fenchelsalat</li> <li>Fodo Oma = Frodo Oma</li> <li>Fuchelich = Fürchterlich</li> <li>Gepi = Spaghetti</li> <li>Habedi = Habe ich dich</li> <li>Handluh = Handschuh</li> <li>Haussas = Hausschuhe</li> <li>Hefe = Helfen</li> <li>Hersieren = Rasieren</li> <li>Hobbelbot = Roggenbrot</li> <li>Hubkesine = Hubschrauber</li> <li>Kaba Kaus = Cowboy Klaus</li> <li>Kabakau = Kakao</li> <li>Kabbel Kabbe = Krabbel Krabbe</li> <li>Käfersoff = Hefezopf</li> <li>Kafta = Kaspar</li> <li>Kak = Kalt</li> <li>Kanastik = Gymnastik</li> <li>Kappekau = Kakao</li> <li>Kavenzlender = Adventskalender</li> <li>Kefezopf = Hefezopf</li> <li>Keinbem = Kein Problem</li> <li>Kenne = Körner</li> <li>Konnfexe = Cornflakes</li> <li>Kotlik = Kotelett</li> <li>Kummel = Krümmel</li> <li>Lake = Schokolade</li> <li>Lamsas = Langsam</li> <li>Lat = Salat</li> <li>Lätta = Latz</li> <li>Lol = Schnuller</li> <li>Ludel = Nudeln</li> <li>Lufbon = Luftballon</li> <li>Luh = Schuh</li> <li>Lukelaus = Nikolaus</li> <li>Mani, Lami = Salami</li> <li>Marinekäfer = Marienkäfer</li> <li>Mate = Tomate</li> <li>Maukenbad = Mountainbike</li> <li>Meeresriegel = Fischstäbchen</li> <li>Meni Oma = Pelmeni Oma</li> <li>Morgig = Guten Morgen</li> <li>Muksen = Muskeln</li> <li>Muna = Müde</li> <li>Muze = Mütze</li> <li>Nasetupfer = Nasenstupser</li> <li>Nogges = Neues</li> <li>Nusskaka = Nussknacker</li> <li>Oga = Olga (Emil's Tagesmutter)</li> <li>Opposon = Operation</li> <li>Pakaka = Paprika</li> <li>Patz = Spatz</li> <li>Pielen = Spielen</li> <li>Pietzlat = Spielplatz</li> <li>Pipi Strumpfhose = Pipi Langstrumpf</li> <li>Pohelli mit Sene und Fanz = Forelle mit Zähnen und Schwanz</li> <li>Pott = Sport</li> <li>Pustewaff = Hustensaft</li> <li>Putz = Pups</li> <li>Sabatee = Salbeitee</li> <li>Sapp un mude = Schlapp und müde</li> <li>Sappefilik = Zappelfillip</li> <li>Sassa = Wasser</li> <li>Sinebots = Rosinenbrötchen</li> <li>Tam = Tannenzapfen</li> <li>Tampfer = Stampfer</li> <li>Tassekesine = Straßenkehrmaschine</li> <li>Tosbot = Toastbrot</li> <li>Waff = Saft</li> <li>Wickemode = Wickelkommode</li> <li>Woff = Wurst</li> </ul>

Tosbot appeared on ulfschneider.io.

Reply via email

The four-legged octopus 2025-07-22T08:58:33Z https://ulfschneider.io/2025-07-22-four-legged-octopus/ <figure><img src="https://ulfschneider.io/img/ux8O6G0K9l-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/ux8O6G0K9l-200.webp 200w, https://ulfschneider.io/img/ux8O6G0K9l-900.webp 900w" sizes="100vw"></figure>

The four-legged octopus appeared on ulfschneider.io.

Reply via email

A friendly introduction to SVG 2025-08-15T05:38:40Z https://ulfschneider.io/2025-07-22-friendly-instruction-to-svg/ <p><a href="https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/?from=newsletter"><cite>A friendly introduction to SVG</cite></a> by Josh Comeau.</p> <blockquote> <p>This post is intended to be completely beginner-friendly, no previous SVG experience required (though it does assume that you’re familiar with the basics of HTML/CSS/JS).</p> <footer>Josh Comeau</footer> </blockquote>

A friendly introduction to SVG appeared on ulfschneider.io.

Reply via email

Safety Notice – Fairlight carbon forks with Ortlieb QLS Fork Pack Mounting System 2025-07-19T19:42:20Z https://ulfschneider.io/2025-07-19-fairlight-ortlieb-safety-notice/ <p>Fit parts G and H!</p> <p>Fairlight recently issued a <a href="https://fairlightcycles.com/product-safety-notices/?v=5f02f0889301">safety notice</a> regarding the Ortlieb QLS Fork Pack Mounting System attached to Fairlight Secan carbon forks. The Ortlieb system can damage your Fairlight carbon fork if you do not mount it by following the <a href="https://downloads.ortlieb.com/instructions/fork_pack.pdf">Ortlieb installation instruction</a>. Specifically, <strong><mark>you have to fit the parts G and H!</mark></strong> If parts G and H are not fitted, the fork rack system will sit against the body of the fork (rather than against the attachment bosses) and <mark>potentially affect the fork’s integrity, which can lead to compromised rider safety</mark>. If you have ever fitted the QLS Fork Pack Mounting System without parts G and H, <mark>stop riding the affected fork and contact Fairlight immediately</mark>.</p>

Safety Notice – Fairlight carbon forks with Ortlieb QLS Fork Pack Mounting System appeared on ulfschneider.io.

Reply via email