dhtmlxDiagram是一個圖表庫，只需幾行程式碼就能生成任何你需要的圖表。藉助自動佈局和實時圖編輯器，以整齊的層次結構視覺化複雜資料。JavaScript dhtmlxDiagram允許您向Web應用程式中新增漂亮的互動式圖表，圖表和圖形。藉助這種輕巧而快速的元件，您的資料將以清晰直觀的方式表示。

慧都網點選下載dhtmlxDiagram試用版

JavaScript活動圖表示庫中的UML圖。它們的主要目的是描述分步活動並提供指導。您可以在我們的dhtmlxDiagram 30天試用版中測試此圖型別。

UML中的活動圖反映了系統或人員的行為。因此，它們通常被定義為行為圖。這意味著它們用於顯示某些情況下在考慮不同場景的情況下的行為。

此圖型別在業務分析中廣泛傳播，用於說明特定的業務用例和其中涉及的活動。但是，甚至可以在描述任何工作流程的更大範圍內應用UML活動圖，它顯示了事件過程中所有可能發生的情況。

活動圖的另一個使用領域是程式設計。開發人員使用此圖型別來制定系統或程式的行為方式。它涉及簡單的操作和更復雜的功能。

如何繪製活動圖

UML活動圖的區別在於可以說明並行活動。例如，我們上面看過的第一個活動圖描述了準備房間和膝上型電腦以滿足客戶需求的必要性，這由指向兩個不同矩形形狀的平行箭頭表示。

當發生錯誤或其他不利事件，並且箭頭指向要重複的先前活動之一時，這些圖還可以包括迭代。

活動圖通常使用3種形狀來構建：

圓形標記活動圖的起點和終點。

矩形反映了活動本身-需要做什麼。

決策形狀是一個十字路口，有兩種或多種可能的方法可以遵循。當一項活動導致多個結果時，就會發生這種情況，從而導致下一步需要採取不同的步驟。箭頭從決策形狀中流出，並指向單獨的矩形以建立用於進一步活動的幾種方案。

此外，這些圖還可以包括其他流程圖形狀，例如，以說明與另一個圖的連線。

節點與顯示活動流程的箭頭連結。為了使圖更具描述性，通常在形狀和箭頭附近提供文字註釋。

使用DHTMLX構建Javascript活動圖的技巧

dhtmlxDiagram庫由許多圖表型別組成，例如flowhcarts，組織結構圖，決策樹和UML活動圖。所有這些JavaScript圖都是高度可定製的，可以在所有主要的Web瀏覽器中很好地呈現，並且可以很容易地使用任何伺服器端技術進行構建。我們廣泛的API為您提供了很多操作，可以完全根據您的需求定製圖表。

在下面，您可以通過CSS以及形狀和聯結器的物件屬性來檢查此活動圖的配置：

<style>
        html,body,.cont{
            background: #FFF;
        }
        .dhx_diagram{
            background: #FFF;
        }
        .dhx_free_diagram .dhx_diagram_flow_item text{
            fill:#FFF;
        }
        .dhx_free_diagram .dhx_item_shape{
            fill:#478D99;
            stroke:none;
        }
        .decision .dhx_item_shape{
            fill:#F7D768;
        }
        .start .dhx_item_shape{
            fill:#FE9998;
        }
        .dhx_free_diagram .dhx_diagram_line{
            stroke: #7D8495;
        }
        .dhx_free_diagram .dhx_diagram_arrow{
            stroke:#7D8495;
            fill:#7D8495;
        }
    </style>

var activity = [
    { "id": "start", "x": 200, "y": 0, "type": "start", text: "Start", css: "start" },
    { "id": 1, "x": 200, "y": 120, "text": "Call Client and \n set-up Appointment", "type": "process" },
    { "id": 2, "x": 200, "y": 240, "text": "", "type": "decision", css: "decision" },
    { "id": 3, "x": 20, "y": 360, "text": "Prepare \n a Conference Room", "type": "process" },
    { "id": 4, "x": 380, "y": 360, "text": "Prepare a Laptop", "type": "process" },
    { "id": 5, "x": 200, "y": 480, "text": "Meet with \n the Client", "type": "process" },
    { "id": 6, "x": 200, "y": 600, "text": "Send \n Follow-up Letter", "type": "process" },
    { "id": 7, "x": 200, "y": 720, "text": "", "type": "decision", css: "decision" },
    { "id": 8, "x": 200, "y": 840, "text": "Create Proposal", "type": "process" },
    { "id": 8.1, "x": 30, "y": 840, "text": "See the \n Activity Diagram \n for creating \n a document", "type": "document" },
    { "id": 9, "x": 200, "y": 960, "text": "Send Proposal \n to Client", "type": "process" },
    { "id": 10, "x": 200, "y": 1080, "type": "end", text: "End", css: "start" },
    { id: 11, "x": 110, "y": 270, type: "text", text: "[appointment onside]" },
    { id: 12, "x": 430, "y": 270, type: "text", text: "[appointment offside]" },
    { id: 13, "x": 440, "y": 750, type: "text", text: "[no statement of problem]" },
    { id: 14, "x": 150, "y": 820, type: "text", text: "[statement of problem]" },
    
{ from: "start", to: 1, type: "line", forwardArrow: "filled"  },
    { from: 1, to: 2, type: "line", forwardArrow: "filled"  },
    { from: 2, to: 3, type: "line", forwardArrow: "filled" , toSide: "top" },
    { from: 2, to: 4, type: "line", forwardArrow: "filled" , toSide: "top" },
    { from: 3, to: 5, type: "line", forwardArrow: "filled"  },
    { from: 4, to: 5, type: "line", forwardArrow: "filled"  },
    { from: 5, to: 6, type: "line", forwardArrow: "filled"  },
    { from: 6, to: 7, type: "line", forwardArrow: "filled"  },
    { from: 7, to: 8, type: "line", forwardArrow: "filled"  },
    { from: 8, to: 8.1, type: "dash" },
    { from: 8, to: 9, type: "line", forwardArrow: "filled"  },
    { from: 9, to: 10, type: "line", forwardArrow: "filled"  },
    { from: 7, to: 10, type: "line", fromSide: "right", toSide: "right", forwardArrow: "filled"  }

藉助我們的文件，您可以掌握有關使用CSS和物件屬性設定活動圖樣式的所有技巧。從圖表元素的顏色到其排列的任何內容都可以按照您喜歡的方式自定義。此外，您可以隨時新增或刪除形狀及其內容來更改圖表。

終端使用者可以通過具有互動式面板的實時編輯器來構建和編輯UML活動圖，該互動式面板具有各種形狀和聯結器以及用於樣式化它們的工具。

我們的導遊提供的說明上初始化編輯器並使用它通過一個小應用程式的例子，能夠立即檢視檢視模式下，所有的最新變化。

我們的線上匯出服務還允許您下載pdf或png格式的現成圖表。

結論

UML中的活動圖定義將這種圖型別描述為逐步活動流的說明。活動基於各種條件，並且可能演變成不同的結果。因此，活動流程圖涵蓋了所討論的系統或人員的行為的所有可能發生。它使它們對於分析業務用例或描述程式設計中的系統行為非常有用。

我們的相簿為您提供了用於構建雄辯而全面的活動圖的所有必要工具。只需嘗試一下我們30天的評估版。

APS幫助提升企業生產效率，真正實現生產計劃視覺化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率