Bạn cần viết một tệp README, nhưng kh&ocirc;ng biết phải n&oacute;i g&igrave;? Nếu bạn thường xuy&ecirc;n gặp vấn đề n&agrave;y, bạn c&oacute; thể c&acirc;n nhắc việc củng cố t&agrave;i liệu của m&igrave;nh bằng một sơ đồ v&igrave; một bức tranh hơn ng&agrave;n lời n&oacute;i muốn n&oacute;i.
B&agrave;i viết n&agrave;y thu thập c&aacute;c c&ocirc;ng cụ tạo đồ thị cho một kho m&atilde;.
<h1 style="text-align: justify;">Trực quan h&oacute;a tệp theo k&iacute;ch thước v&agrave; loại</h1>
H&atilde;y bắt đầu với c&ocirc;ng cụ chung nhất, repo-visualizer. N&oacute; vẽ c&aacute;c tệp dưới dạng bong b&oacute;ng, cho biết t&ecirc;n v&agrave; k&iacute;ch thước phần mở rộng của ch&uacute;ng với m&agrave;u sắc v&agrave; k&iacute;ch thước tương ứng.&nbsp;
&nbsp;
<a href="https://next.github.com/">GitHub Next</a>, một ph&ograve;ng th&iacute; nghiệm tại c&ocirc;ng ty GitHub đ&atilde; mang đến v&agrave; (đương nhi&ecirc;n) n&oacute; được đ&oacute;ng g&oacute;i dưới dạng một <a href="https://github.com/features/actions">GitHub Action</a>.
<h1 style="text-align: justify;">Trực quan h&oacute;a tệp Docker Compose</h1>
C&ocirc;ng cụ tiếp theo phục vụ cụ thể cho người d&ugrave;ng Docker, nhưng n&oacute; vẫn l&agrave; c&ocirc;ng cụ bất khả tri về ng&ocirc;n ngữ. Để trực quan h&oacute;a docker-compos.yml, bạn c&oacute; thể sử dụng docker-comp-viz:
<code>docker run \--rm \-it \--name dcv \-v $(pwd):/input pmsipilot/docker-compose-viz render \-m image docker-compose.yml</code>
N&oacute; sẽ tr&ocirc;ng như thế n&agrave;y:
<img style="width: 500px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/e2351be2-89c0-40cc-a9df-b7a25311865f" alt="Trực quan h&oacute;a tệp Docker Compose" />
<h1 style="text-align: justify;">Trực quan h&oacute;a đồ thị cuộc gọi</h1>
<a href="https://github.com/scottrogowski/code2flow">Code2flow</a> hỗ trợ một số ng&ocirc;n ngữ động, bao gồm Python, JavaScript, Ruby v&agrave; PHP.
&nbsp;Dưới đ&acirc;y l&agrave; v&iacute; dụ được cung cấp trong README của n&oacute;:
<code>code2flow code2flow/engine.py code2flow/python.py --target-function=code2flow --downstream-depth=3</code>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/176e311c-4db6-46b3-8623-f54b18f079a9" alt="Trực quan h&oacute;a đồ thị cuộc gọi" />
Nếu Python l&agrave; ng&ocirc;n ngữ duy nhất m&agrave; bạn quan t&acirc;m, bạn c&oacute; thể đ&atilde; nghe n&oacute;i về <a href="https://github.com/gak/pycallgraph">pycallgraph</a>, nhưng v&igrave; sự hạn chế trong c&aacute;c dự &aacute;n phần mềm nguồn mở v&agrave; hạn chế về thời gian c&aacute; nh&acirc;n m&agrave; t&aacute;c giả ban đầu đ&atilde; phải từ bỏ dự &aacute;n. pyan c&oacute; thể l&agrave; m&ocirc;t sự thay thế hợp l&yacute; nhất.
<code>pyan *.py --uses --no-defines --colored --grouped --annotated --svg &gt;myuses.svg</code>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/7a84b29a-4593-4e81-bcdd-66334bc46aec" alt="Trực quan h&oacute;a đồ thị cuộc gọi" />
<h1 style="text-align: justify;">Trực quan h&oacute;a c&aacute;c dependency</h1>
Một chức năng cơ bản của hệ thống x&acirc;y dựng v&agrave; tr&igrave;nh quản l&yacute; g&oacute;i l&agrave; giải quyết dependency. Như bạn mong đợi, nhiều c&ocirc;ng cụ trực quan h&oacute;a khai th&aacute;c c&aacute;c biểu đồ dependency do phần mềm n&agrave;y tạo ra để vẽ sơ đồ cho một kho lưu trữ.
N&oacute;i t&oacute;m lại, hầu hết c&aacute;c c&ocirc;ng cụ n&agrave;y đều sử dụng <code>graphviz</code> cho c&ocirc;ng việc vẽ biểu đồ thực tế. Do đ&oacute;, đừng ngạc nhi&ecirc;n nếu bạn ph&aacute;t hiện ra rằng c&aacute;c sơ đồ c&oacute; chung một phong c&aacute;ch.
<a href="https://bazel.build/">Bazel</a> l&agrave; một hệ thống x&acirc;y dựng bất khả tri về ng&ocirc;n ngữ. C&aacute;clập tr&igrave;nh vi&ecirc;n đằng sau Bazel hiểu r&otilde; người d&ugrave;ng của m&igrave;nh đến nỗi họ đ&atilde; đưa ra một <a href="https://blog.bazel.build/2015/06/17/visualize-your-build.html">hướng dẫn ch&iacute;nh thức</a> để trực quan h&oacute;a c&aacute;c dependency được x&aacute;c định bằng Bazel:
<code>bazel query 'deps(//:main)' --output graph &gt; dependencies.in</code>
<code>dot -Tpng &lt; dependencies.in &gt; dependencies.svg</code>
N&oacute; cung cấp dưới dạng:
<img style="width: 400px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/bcae82b9-32fb-4fe8-bb17-121b95cce420" alt="Trực quan h&oacute;a c&aacute;c dependency" />
Đối với c&aacute;c g&oacute;i Python trong một m&ocirc;i trường, h&atilde;y sử dụng <code>pipdeptree</code>:
<code>pipdeptree --graph-output svg &gt; dependencies.svg</code>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/de9ee7bb-8873-4526-a2e4-e3646d58d0cd" alt="Trực quan h&oacute;a c&aacute;c dependency" />
Đối với c&aacute;c dự &aacute;n Java được x&acirc;y dựng bằng Maven, <code>depgraph-maven-plugin</code> l&agrave; c&aacute;ch để thực hiện:
<code>mvn com.github.ferstl:depgraph-maven-plugin:graph</code>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/bd82e5b2-bce4-44fc-b6b0-b5057dd9530a" alt="Trực quan h&oacute;a c&aacute;c dependency" />
<h1 style="text-align: justify;">Tăng t&iacute;nh tương t&aacute;c</h1>
C&oacute; thể bạn kh&ocirc;ng ở đ&acirc;y để điền v&agrave;o README của m&igrave;nh; thay v&agrave;o đ&oacute;, bạn chỉ muốn t&igrave;m hiểu về repo nhanh nhất v&agrave; trực quan nhất c&oacute; thể. Nếu đ&uacute;ng như vậy, c&oacute; một số c&ocirc;ng cụ tuyệt vời m&agrave; bạn c&oacute; thể sử dụng:
<a href="https://gource.io/">Gource</a>: Một phần mềm chạy cục bộ.
<a href="https://www.codesee.io/">CodeSee</a>: Một dịch vụ đ&aacute;m m&acirc;y cung cấp c&aacute;c g&oacute;i trả ph&iacute;.
Ch&uacute;c bạn th&agrave;nh c&ocirc;ng!

Admin

7 công cụ giúp trực quan hóa Codebase

Cùng tác giả

Admin

Có liên quan