~~NOTOC~~
===== 4-4 加入Chart API====
  * [[wiki:dokuwiki|DokuWiki]]與語法[[wiki:syntax|Syntax]]{{fa>flask&align=right}}
  * 展示本站使用到的[[https://www.dokuwiki.org/plugins|Dokuwiki Plugins]]((Dokuwiki主程式為了維護其完整性，透過外掛Plugins與[[https://www.dokuwiki.org/template|模板Templates]]兩大類作為拓展功能用的Extensions，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。))

==== Google Chart Plug-in====
[[https://www.dokuwiki.org/plugin:gchart|plugin:gchart]]
  * plugin運用Google Image Chart API，但此API荒廢幾年後終於在2024年停止運行。
    * plugin作者改用Open Source的[[https://quickchart.io/|QuickChart.io]]，因此有些圖表的顯示與之前有不同。
  * pie3d ((3D pie graph))  pie2d ((2D pie graph)) line ((line graph)) sparkline ((“sparkline” graph)) hbar ((horizontal bar graph)) vbar ((vertical bar graph)) qr ((two-dimensional barcode))
<gchart 350x120 vbar #0000ff #ffffff right>
Apples       = 3
Peaches      = 23
Strawberries = 25
Peanuts      = 7
</gchart>
<gchart qr 120x120>
L
https://www.tainan.com.tw/
</gchart>
<WRAP clear/>

==== Mermaid Plugin====
[[https://www.dokuwiki.org/plugin:mermaid|plugin:mermaid]]
  * 類似Google Chart都是屬於應用API的plugin
  * 可以畫的圖形類別，有甘特圖、ER圖、Mind思緒圖...以及基本的flowchart流程圖
  * 用Javascript來產生圖案，圖案中的文字可選取，而不是點陣圖輸出
  * 設定: ESM或CJS模組
    * ESM與CommonJS (CJS) 的差異在於模組加載和導出的方式。
    * ESM 使用靜態加載，CJS 使用動態加載，並且ESM 支援預設導出。
    * CJS 較為古老，主要用於Node.js，而ESM 則更為現代，適用於瀏覽器和新版的Node.js 環境。

====test 1====
<mermaid>
  raw
  graph TB
day1 --> day2
  subgraph day1
  direction LR
  P1((中興林場)) --> P2(((大坑農場))) --> P3((虎頭埤))
  end

  subgraph day2
  direction RL
  P4((烏骨雞)) --> P5((茄冬雞)) 
  end
  
</mermaid>

====mindmap====
<WRAP round tip 500px>
  * 雖然dokuwiki本身俱系統性，寫作時筆者主觀的想法不一定為讀者所理解，此時輔以Mind Graph圖表，應該可以讓放置在各namespace或文字分段分頁與wiki系統間取得平衡。
  * mindmap為一對多，所以內碼有root，佛法說“一念不覺生三細 境界為緣長六粗”---大乘起信論，也可以說明mindmap只一對多非多對多關係。
</WRAP>
 <mermaid>
    mindmap
  root((台南與我))
    37分區
      區公所fb
      Theme主題
        Tour旅遊
        Spot地點
        Biz在地企業
      market市場
      Marketplace商圈
      Eats飲食
      Footer設計
    Where’s找台南
      Farmer農產
      Blossom賞花
      English單字台南
    Temple眾神之都
      Tao道教廟宇
      Church教會
      Buddism佛法
    Biz在地企業
    Geog自然地理
    People名人堂
    Culture文化
    Museum博物館
    Hobby興趣
  </mermaid>

===有所不能:mindmap順序===
如下圖四個區的順序若要正確對地理位置，即便不論中文字編碼也無法自行控制mindmap對應的順序。 #下圖是剛好能正確對應的案例
<WRAP group>
<WRAP half column>
<mermaid>
    mindmap
  root((下營區))
    1六甲區
    2麻豆區
    3學甲區
    4新營區
  </mermaid>
</WRAP>
<WRAP half column>
 <mermaid>
mindmap
  root((新化))
    關廟
    新市
    歸仁
    左鎮
    永康
    山上
    龍崎
  </mermaid>
 </WRAP>
</WRAP>
====flowchart ====
<wrap tip>flowchart可以表現多對多 cf. mindmap的一對多</wrap>
<mermaid>
flowchart TD
    B(Go shopping) -->|One| D[Laptop]
    B -->|One| E
    C(Let me think) -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
    </mermaid>
[<10>]