title: How to wrap text automatically in a Mermaid flowchart node?
body: <p>Is there a way to set a max width for text within a Mermaid flowchart node, such that it automatically wraps?</p>
  <p>For example - how would I get the first graph to look like the second graph, without painstakingly inserting manual line breaks:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="mermaid"&gt;
  flowchart TD
      A{Is it Friday midday UTC?} -- Yes --&gt; B(Check out Daft Punk's new single 'Get Lucky' if you have the chance. Sound of the summer.)
      A -- No --&gt; C(Never mind then)
  &lt;/div&gt;
  
  &lt;h2&gt;Desired output&lt;/h2&gt;
  &lt;div class="mermaid"&gt;
  flowchart TD
      A{Is it Friday&lt;/br&gt;midday UTC?} -- Yes --&gt; B(Check out Daft Punk's new single&lt;/br&gt;'Get Lucky' if you have the chance.&lt;/br&gt;Sound of the summer.)
      A -- No --&gt; C(Never mind then)
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/G4iMv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/G4iMv.png" alt="Screenshot of results" /></a></p>
  <p>I have a suspicion the solution will be a single line of CSS but I don't know what it is.</p>