Flowchart.js 是一個流程圖庫，可以很方便地創建各種流程圖。要實現圖例和說明文本，可以通過以下步驟：

1. 創建一個包含圖例和說明文本的 HTML 元素，例如一個 <div> 元素。在這個元素中添加圖例和說明文本的內容。

<div id="legend">
  <h3>圖例</h3>
  <ul>
    <li><span style="color: #ff0000;">節點1</span> - 第一個節點</li>
    <li><span style="color: #00ff00;">節點2</span> - 第二個節點</li>
    <li><span style="color: #0000ff;">節點3</span> - 第三個節點</li>
  </ul>
</div>

2. 在 Flowchart.js 中創建流程圖，并設置相關參數，例如顏色和形狀。

var chart = new FlowChart({
  container: document.getElementById('myChart'),
  data: {
    nodes: [
      { id: 'node1', text: '節點1', shape: 'rect', fillColor: '#ff0000' },
      { id: 'node2', text: '節點2', shape: 'rect', fillColor: '#00ff00' },
      { id: 'node3', text: '節點3', shape: 'rect', fillColor: '#0000ff' }
    ]
  }
});

3. 使用 CSS 樣式來調整圖例和說明文本的樣式，使其與流程圖風格一致。

#legend {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
#legend h3 {
  font-size: 16px;
  margin-bottom: 5px;
}
#legend ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#legend li {
  margin-bottom: 5px;
}
#legend span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

通過以上步驟，您可以在 Flowchart.js 的流程圖中添加圖例和說明文本，使其更加清晰和易于理解。