Gitbook Plugin：UML

• Github Source

  GitBook PlantUml Plugin

• 安裝方式

  至 nodejs gitbook 安裝目錄下的 node_modules 目錄

  cd /usr/lib/node_modules/gitbook/node_modules
  npm install gitbook-plugin-plantuml
  

  編輯 book.json

  "plugins": ["plantuml"]
  

  下載 plantuml.jar 至 Gitbook 專案資料夾最上層，並且於 Gitbook 專案內創建 assets/images/uml 資料夾，其檔案結構如下

  gitbook
  |- SUMMARY.md
  |- README.md
  |- plantuml.jar
  |- assets
      |- images
          |- uml
  

  安裝使用 plantuml.jar 所需的套件 "openjdk-7-jre"、"graphviz"

  apt-get install openjdk-7-jre graphviz
  updatedb
  

  修正支援超過兩層目錄

  vim /usr/lib/node_modules/gitbook/node_modules/gitbook-plugin-plantuml/index.js
  
            # Original
            if (pathToken.length == 1) {
                chapterPath = '.'
                assetPath = './assets/images/uml/'
                baseName = pathToken[0].split('.')[0]
            }
            else {
                chapterPath = pathToken[0]
                assetPath = '../assets/images/uml/' + chapterPath + '/'
                baseName = pathToken[1].split('.')[0]
            } 
  
            # edited
            if (pathToken.length == 1) {
                chapterPath = '.'
                assetPath = './assets/images/uml/'
                baseName = pathToken[0].split('.')[0]
            }
            else {
                chapterPath = pathToken[0]
                assetPath = '../assets/images/uml/' + chapterPath + '/'
                baseName = pathToken[pathToken.length-1].split('.')[0]
            }
  

  修改因為 Nginx Proxy 導致的 Link error

  vim /usr/lib/node_modules/gitbook/node_modules/gitbook-plugin-ml/index.js
  
            # Original
            var chapterPath
            var assetPath
            var baseName
            var umlPath
  
            if (pathToken.length == 1) {
                chapterPath = '.'
                assetPath = './assets/images/uml/'
                baseName = pathToken[0].split('.')[0]
            }
            else {
                chapterPath = pathToken[0]
                assetPath = '../assets/images/uml/' + chapterPath + '/'
                baseName = pathToken[pathToken.length-1].split('.')[0]
            }
  
            <略>
  
                if (i == 0) {
                    page.content = page.content.replace(line, '![](' + assetPath + baseName + '.png)');
                    continue;
                }
                if (i < 10) {
                    page.content = page.content.replace(line, '![](' + assetPath + baseName + '_00' + i + '.png)');
                    continue;
                }
                if (i >= 10 && i < 100) {
                    page.content = page.content.replace(line, '![](' + assetPath + baseName + '_0' + i + '.png)');
                    continue;
                }
                if (i >= 100) {
                    page.content = page.content.replace(line, '![](' + assetPath + baseName + '_' + i + '.png)');
                    continue;
                }
  
            # edited
            var chapterPath
            var assetPath
            var baseName
            var umlPath
            var imgPath
  
            if (pathToken.length == 1) {
                chapterPath = '.'
                assetPath = './assets/images/uml/'
                baseName = pathToken[0].split('.')[0]
                imgPath = '/gitbook/assets/images/uml/'
            }
            else {
                chapterPath = pathToken[0]
                assetPath = '../assets/images/uml/' + chapterPath + '/'
                baseName = pathToken[pathToken.length-1].split('.')[0]
                imgPath = '/gitbook/assets/images/uml/' + chapterPath + '/'
            }
  
            <略>
  
                if (i == 0) {
                    page.content = page.content.replace(line, '![](' + imgPath + baseName + '.png)');
                    continue;
                }
                if (i < 10) {
                    page.content = page.content.replace(line, '![](' + imgPath + baseName + '_00' + i + '.png)');
                    continue;
                }
                if (i >= 10 && i < 100) {
                    page.content = page.content.replace(line, '![](' + imgPath + baseName + '_0' + i + '.png)');
                    continue;
                }
                if (i >= 100) {
                    page.content = page.content.replace(line, '![](' + imgPath + baseName + '_' + i + '.png)');
                    continue;
                }
  

• 使用方式 (這邊使用'取代`)

  '''uml
  @startuml
  
    Class Stage
    Class Timeout {
        +constructor:function(cfg)
        +timeout:function(ctx)
        +overdue:function(ctx)
        +stage: Stage
    }
    Stage <|-- Timeout
  
  @enduml
  '''
  

呈現方式

• 注意事項

  1. '''uml 不能縮排

  2. 更新過 uml 原始碼後需要重新啟動 gitbook 已完成重新繪圖動作，有時候需要重新啟動兩次才會出現圖片 (因為此 plugin 是呼叫本機的 plantuml.jar 產生圖片)