JS Sequence Diagrams
Ví dụ
Chúng ta biến
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
thành
Yêu cầu
Bạn sẽ cần Snap.svg, Web Font Loader (nếu bạn muốn sử dụng phông chữ tùy chỉnh), underscore.js (hoặc lodash), và tùy chọn là jQuery.
Cài đặt
Bower
Chạy bower install bramp/js-sequence-diagrams
và bao gồm các đoạn mã dưới đây:
<script src="{{ bower directory }}/bower-webfontloader/webfont.js" />
<script src="{{ bower directory }}/snap.svg/dist/snap.svg-min.js" />
<script src="{{ bower directory }}/underscore/underscore-min.js" />
<script src="{{ bower directory }}/js-sequence-diagrams/dist/sequence-diagram-min.js" />
cũng nhập CSS nếu bạn dự định sử dụng chủ đề vẽ tay:
<link href="{{ bower directory }}/js-sequence-diagrams/dist/sequence-diagram-min.css" rel="stylesheet" />
Không sử dụng bower? Không vấn đề. Chỉ cần tải xuống các phụ thuộc và tự mình bao gồm chúng. Nếu bạn dự định sử dụng chủ đề vẽ tay, đừng quên đặt hai tệp font vào thư mục css của bạn: /fonts/daniel/danielbd.woff và /fonts/daniel/danielbd.woff2
Sử dụng
Bạn có thể sử dụng lớp Diagram như sau:
<div id="diagram">Diagram will be placed here</div>
<script>
var d = Diagram.parse("A->B: Does something");
var options = {theme: 'simple'};
d.drawSVG('diagram', options);
</script>
hoặc sử dụng jQuery để làm tất cả công việc:
<script src="{{ bower directory }}/jquery/dist/jquery.min.js" />
<div class="diagram">A->B: Message</div>
<script>
var options = {theme: 'hand'};
$(".diagram").sequenceDiagram(options);
</script>
Để xem ví dụ đầy đủ, hãy kiểm tra the demo site.
Tùy chọn
var options = {
// Change the styling of the diagram, typically one of 'simple', 'hand'. New themes can be registered with registerTheme(...).
theme: string,
// CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg)
css_class: string,
};
Tùy chỉnh kiểu dáng
Các lớp CSS sau được áp dụng cho biểu đồ SVG khi sử dụng snap.svg:
sequence
: Áp dụng cho thẻ SVG chính.title
: Được áp dụng cho tiêu đề của biểu đồ.actor
: Được áp dụng cho các diễn viên.signal
: Được áp dụng cho tín hiệu.note
: Được áp dụng cho tất cả ghi chú.
Sau đó, bạn có thể tùy chỉnh biểu đồ, ví dụ:
.signal text {
fill: #000000;
}
.signal text:hover {
fill: #aaaaaa
}
.note rect, .note path {
fill: #ffff00;
}
.title rect, .title path,
.actor rect, .actor path {
fill: #ffffff
}
Sự thay thế Raphaël
Phiên bản 1.x của thư viện này đã sử dụng Raphaël để vẽ biểu đồ, tuy nhiên, Raphaël có một số hạn chế và sau đó biến mất khỏi Internet. Chúng tôi đã quyết định chuyển sang Snap.svg, một thư viện thực hiện hoàn toàn bằng SVG thay vì Raphaël, thư viện mà ngoài SVG, còn hỗ trợ VML (trên Internet Explorer). Hỗ trợ VML này đã khiến việc sử dụng một số tính năng SVG mới hơn trở nên không thể thực hiện được. SVG nguyên thuỷ cho phép chúng ta sử dụng kiểu dáng CSS, hỗ trợ phông chữ tốt hơn, hiệu ứng và nhiều tính năng khác.
Để hỗ trợ trong việc chuyển đổi, Phiên bản 2.x sẽ hỗ trợ cả Raphaël và Snap.svg (ưu tiên Snap.svg). Nếu bạn bao gồm Raphaël thay vì snap.svg, nó sẽ mặc định sử dụng Raphaël làm thư viện kết xuất. Ví dụ:
<script src="{{ bower directory }}/raphael/raphael-min.js"></script>
Cũng có bốn chủ đề chuyển tiếp, ‘snapSimple’, ‘snapHand’, ‘raphaelSimple’, ‘raphaelHand’, mà bắt buộc sử dụng Snap.svg hoặc Raphaël.
Kế hoạch là loại bỏ sự hỗ trợ cho Raphaël trong phiên bản sắp tới, giúp đơn giản hóa thư viện và giảm kích thước tệp.
Thêm một Phông chữ
Raphael yêu cầu sử dụng các phông chữ theo kiểu Cufon. Tìm phông chữ bạn muốn ở định dạng ttf hoặc otf, truy cập Cufon’s site và chuyển đổi nó thành tệp javascript. Sau đó đảm bảo rằng phông chữ được bao gồm thông qua mã HTML hoặc biên dịch lại sau khi chỉnh sửa main.js. Cho đến nay, chỉ có phông chữ viết tay được bao gồm là Daniel Bold.
Yêu cầu Xây dựng
Quá trình xây dựng được quản lý bằng một tệp Makefile và sử dụng các công cụ khác nhau có sẵn từ npm. Do đó, cả make
và npm đều cần được cài đặt, và có thể dễ dàng cài đặt trên bất kỳ máy Linux hoặc Mac nào.
make
Tệp Makefile sẽ sử dụng npm để cài đặt tất cả các phụ thuộc phát triển, xây dựng và kiểm tra.
Kiểm thử
Chúng tôi sử dụng qunit cho quá trình kiểm thử. Nó có thể chạy từ dòng lệnh hoặc thông qua trình duyệt. Trên thực tế, dòng lệnh kiểm thử thực hiện nhiều biến thể của lodash, Underscore, cùng với và không minification.
make test
...
Global summary:
┌───────┬───────┬────────────┬────────┬────────┬─────────┐
│ Files │ Tests │ Assertions │ Failed │ Passed │ Runtime │
├───────┼───────┼────────────┼────────┼────────┼─────────┤
│ 1 │ 13 │ 231 │ 0 │ 231 │ 250 │
└───────┴───────┴────────────┴────────┴────────┴─────────┘
hoặc chạy make
và sau đó mở tệp test/qunit.html trong trình duyệt. Cuối cùng, có một sân chơi đơn giản có sẵn tại test/test.html.
Cách phát hành
- Đảm bảo tất cả các thay đổi đã được kiểm tra và lưu
- Tăng phiên bản trong src/main.js và bower.json
make clean
make
git add -f src/main.js bower.json dist/*
git commit -m "Phát hành phiên bản 2.x.x"
git push origin master
git tag -a v2.x.x -m v2.x.x
git push origin v2.x.x
Công việc cần làm
Chủ đề khác
Tự động hóa quá trình phát hành
Kiểm tra để kiểm tra xem SVG được tạo ra có đúng không
Cải thiện chủ đề vẽ tay
- “Ghi chú bên trái của Bob: ” tạo ra một hộp trống nhỏ.
- Phông chữ có vẻ có lề thêm ở dưới cùng.
- Những đường nét uốn cong không luôn tiếp xúc.
Dozens of other issues on https://github.com/bramp/js-sequence-diagrams/issues
Người đóng góp
qua GitHub
Cảm ơn
Dự án này sử dụng Jison, snap.svg, underscore.js và Daniel font tuyệt vời (miễn phí sử dụng cho bất kỳ mục đích nào).
Rất cảm ơn Web Sequence Diagrams đã thúc đẩy dự án này mạnh mẽ và tạo nền tảng cho cú pháp của nó.
Liên quan
- Web Sequence Diagrams Phiên bản phía máy chủ với một dịch vụ thương mại
- flowchart.js Một dự án tương tự vẽ biểu đồ luồng trong trình duyệt
Tạo biểu đồ trình tự UML từ văn bản đơn giản
https://bramp.github.io/js-sequence-diagrams/
bởi Andrew Brampton 2012-2017
Thông tin Tải về:
Tác giả: bramp
Mã nguồn: https://github.com/bramp/js-sequence-diagrams
Giấy phép: BSD-2-Clause license