Any website

Script tag

<script src="https://unpkg.com/@vhyxchart/core/dist/vhyxchart.global.js" data-auto></script>
<!-- renders every <pre><code class="language-vhyx"> on the page -->

Custom element

<vhyx-chart theme="dark" controls="false">
  flowchart LR
    a --> b
</vhyx-chart>
<vhyx-chart src="/diagrams/checkout.vhyx"></vhyx-chart>

The element takes the same player options as attributes:

<vhyx-chart
  controls="false"            <!-- start with the controller closed -->
  controls-toggle="false"     <!-- hide the header switch -->
  controls-position="top"     <!-- top | bottom -->
  header="false"              <!-- hide the header -->
  chart-title="Checkout"      <!-- header title -->
  layout="plain"              <!-- card | plain -->
  src="/diagrams/checkout.vhyx"></vhyx-chart>

From script: el.chart.setControlsVisible(true), and el.chart.on('controls', (open) => …).