{"id":492,"date":"2026-06-29T08:56:12","date_gmt":"2026-06-29T08:56:12","guid":{"rendered":"https:\/\/www.ai-diagrams.com\/vn\/living-documentation-a-hands-on-review-of-the-vpascode-and-opendocs-integration\/"},"modified":"2026-06-29T08:56:12","modified_gmt":"2026-06-29T08:56:12","slug":"living-documentation-a-hands-on-review-of-the-vpascode-and-opendocs-integration","status":"publish","type":"post","link":"https:\/\/www.ai-diagrams.com\/vn\/living-documentation-a-hands-on-review-of-the-vpascode-and-opendocs-integration\/","title":{"rendered":"T\u00e0i li\u1ec7u s\u1ed1ng \u0111\u1ed9ng: \u0110\u00e1nh gi\u00e1 th\u1ef1c t\u1ebf v\u1ec1 t\u00edch h\u1ee3p VPasCode v\u00e0 OpenDocs"},"content":{"rendered":"

Gi\u1edbi thi\u1ec7u<\/h2>\n

L\u00e0 m\u1ed9t Qu\u1ea3n l\u00fd S\u1ea3n ph\u1ea9m v\u1edbi h\u01a1n b\u1ea3y n\u0103m kinh nghi\u1ec7m k\u1ebft n\u1ed1i kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u0111\u1ed9i k\u1ef9 thu\u1eadt v\u00e0 c\u00e1c b\u00ean li\u00ean quan kinh doanh, t\u00f4i lu\u00f4n coi t\u00e0i li\u1ec7u v\u1eeba l\u00e0 \u0111i\u1ec1u c\u1ea7n thi\u1ebft v\u1eeba l\u00e0 n\u1ed7i \u0111au. T\u1ea5t c\u1ea3 ch\u00fang ta \u0111\u1ec1u bi\u1ebft s\u1ef1 kh\u00f3 kh\u0103n: c\u00e1c k\u1ef9 s\u01b0 x\u00e2y d\u1ef1ng c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p, nh\u01b0ng c\u00e1c s\u01a1 \u0111\u1ed3 gi\u1ea3i th\u00edch nh\u1eefng h\u1ec7 th\u1ed1ng \u0111\u00f3 th\u01b0\u1eddng n\u1eb1m trong c\u00e1c t\u1eadp tin t\u0129nh v\u00e0 tr\u1edf n\u00ean l\u1ed7i th\u1eddi ngay khi m\u00e3 ngu\u1ed3n \u0111\u01b0\u1ee3c g\u1ed9p. K\u1ebft qu\u1ea3 l\u00e0 \u201cn\u1ee3 t\u00e0i li\u1ec7u\u201d \u2013 m\u1ed9t c\u01a1 s\u1edf tri th\u1ee9c m\u00e0 kh\u00f4ng ai tin t\u01b0\u1edfng v\u00ec n\u00f3 kh\u00f4ng ph\u1ea3n \u00e1nh th\u1ef1c t\u1ebf.<\/p>\n

G\u1ea7n \u0111\u00e2y, t\u00f4i c\u00f3 c\u01a1 h\u1ed9i th\u1eed nghi\u1ec7m m\u1ed9t quy tr\u00ecnh m\u1edbi t\u1eeb Visual Paradigm h\u1ee9a h\u1eb9n gi\u1ea3i quy\u1ebft ch\u00ednh x\u00e1c v\u1ea5n \u0111\u1ec1 n\u00e0y. B\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3pVPasCode<\/strong>, m\u1ed9t c\u00f4ng c\u1ee5 chuy\u1ec3n v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3, v\u1edbiOpenDocs<\/strong>, m\u1ed9t n\u1ec1n t\u1ea3ng qu\u1ea3n l\u00fd tri th\u1ee9c \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi tr\u00ed tu\u1ec7 nh\u00e2n t\u1ea1o, h\u1ecd \u0111\u00e3 t\u1ea1o ra m\u1ed9t lu\u1ed3ng c\u00f4ng vi\u1ec7c li\u1ec1n m\u1ea1ch cho \u201cS\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng M\u00e3\u201d. B\u00e0i \u0111\u00e1nh gi\u00e1 n\u00e0y kh\u00e1m ph\u00e1 c\u00e1ch t\u00edch h\u1ee3p n\u00e0y ho\u1ea1t \u0111\u1ed9ng, t\u1ea1i sao n\u00f3 quan tr\u1ecdng \u0111\u1ed1i v\u1edbi c\u00e1c \u0111\u1ed9i \u0111a ch\u1ee9c n\u0103ng, v\u00e0 c\u00e1ch n\u00f3 c\u00f3 th\u1ec3 bi\u1ebfn t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt c\u1ee7a b\u1ea1n t\u1eeb m\u1ed9t kho l\u01b0u tr\u1eef t\u0129nh th\u00e0nh m\u1ed9t t\u00e0i s\u1ea3n s\u1ed1ng \u0111\u1ed9ng v\u00e0 \u0111\u1ea7y n\u0103ng l\u01b0\u1ee3ng.<\/p>\n

\"Living<\/p>\n\n

C\u00e0i \u0111\u1eb7t & C\u00f4ng c\u1ee5: B\u1eaft \u0111\u1ea7u<\/h2>\n

R\u00e0o c\u1ea3n ban \u0111\u1ea7u \u0111\u1ed1i v\u1edbi ph\u1ea7n l\u1edbn c\u00f4ng c\u1ee5 v\u1ebd s\u01a1 \u0111\u1ed3 l\u00e0 kh\u00e1 cao \u2013 b\u1ea1n c\u1ea7n h\u1ecdc giao di\u1ec7n k\u00e9o th\u1ea3 ri\u00eang bi\u1ec7t ho\u1eb7c qu\u1ea3n l\u00fd c\u00e1c c\u00e0i \u0111\u1eb7t m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n n\u1eb7ng n\u1ec1. VPasCode ti\u1ebfp c\u1eadn theo c\u00e1ch kh\u00e1c b\u1eb1ng c\u00e1ch t\u1eadn d\u1ee5ng c\u00fa ph\u00e1p m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 \u0111\u00e3 quen thu\u1ed9c, nh\u01b0 PlantUML, Mermaid.js ho\u1eb7c Graphviz.<\/p>\n

\u0110\u1ec3 b\u1eaft \u0111\u1ea7u, b\u1ea1n c\u1ea7n truy c\u1eadp v\u00e0o hai th\u00e0nh ph\u1ea7n ch\u00ednh:<\/p>\n

    \n
  1. \n

    VPasCode<\/strong>: \u0110\u00e2y l\u00e0 b\u1ea3ng v\u1ebd c\u1ee7a b\u1ea1n \u0111\u1ec3 t\u1ea1o h\u00ecnh \u1ea3nh b\u1eb1ng m\u00e3. N\u00f3 h\u1ed7 tr\u1ee3 xem tr\u01b0\u1edbc theo th\u1eddi gian th\u1ef1c, cho ph\u00e9p b\u1ea1n th\u1ea5y s\u01a1 \u0111\u1ed3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt ngay khi b\u1ea1n g\u00f5.<\/p>\n<\/li>\n

  2. \n

    OpenDocs<\/strong>: \u0110\u00e2y l\u00e0 trung t\u00e2m cho c\u01a1 s\u1edf tri th\u1ee9c c\u1ee7a \u0111\u1ed9i nh\u00f3m b\u1ea1n. \u0110\u00e2y l\u00e0 n\u01a1i c\u00e1c t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt, t\u00e0i li\u1ec7u API v\u00e0 y\u00eau c\u1ea7u s\u1ea3n ph\u1ea9m \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef.<\/p>\n<\/li>\n<\/ol>\n

    K\u1ebft n\u1ed1i lu\u1ed3ng c\u00f4ng vi\u1ec7c<\/h3>\n

    M\u1ed9t trong nh\u1eefng kh\u00eda c\u1ea1nh t\u01b0\u01a1i m\u1edbi nh\u1ea5t c\u1ee7a c\u00e1ch thi\u1ebft l\u1eadp n\u00e0y l\u00e0 s\u1ef1 \u0111\u01a1n gi\u1ea3n c\u1ee7a n\u00f3. Kh\u00f4ng c\u1ea7n t\u1ea1o kh\u00f3a API ph\u1ee9c t\u1ea1p hay c\u1ea5u h\u00ecnh webhook. T\u00edch h\u1ee3p n\u00e0y \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng ngay trong h\u1ec7 sinh th\u00e1i Visual Paradigm v\u00e0 ho\u00e0n to\u00e0n d\u1ef1a tr\u00ean n\u1ec1n t\u1ea3ng \u0111\u00e1m m\u00e2y.<\/p>\n

    Ch\u1ec9 c\u1ea7n \u0111\u0103ng nh\u1eadp v\u00e0o c\u1ea3 hai n\u1ec1n t\u1ea3ng b\u1eb1ng c\u00f9ng m\u1ed9t t\u00e0i kho\u1ea3n Visual Paradigm. Sau khi x\u00e1c th\u1ef1c, c\u00e1c h\u1ec7 th\u1ed1ng s\u1ebd t\u1ef1 \u0111\u1ed9ng nh\u1eadn di\u1ec7n l\u1eabn nhau. Khi b\u1ea1n s\u1eb5n s\u00e0ng chia s\u1ebb m\u1ed9t h\u00ecnh \u1ea3nh, n\u00fat \u201cG\u1eedi \u0111\u1ebfn lu\u1ed3ng OpenDocs\u201d trong VPasCode s\u1ebd chuy\u1ec3n s\u01a1 \u0111\u1ed3 c\u1ee7a b\u1ea1n m\u1ed9t c\u00e1ch an to\u00e0n \u0111\u1ebfn kh\u00f4ng gian l\u00e0m vi\u1ec7c OpenDocs c\u1ee7a b\u1ea1n.<\/p>\n\n

    S\u01a1 \u0111\u1ed3 d\u01b0\u1edbi d\u1ea1ng M\u00e3 trong h\u00e0nh \u0111\u1ed9ng: C\u00e1c v\u00ed d\u1ee5 th\u1ef1c t\u1ebf<\/h2>\n

    \u0110\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3u \u0111\u01b0\u1ee3c gi\u00e1 tr\u1ecb c\u1ee7a quy tr\u00ecnh n\u00e0y, t\u00f4i \u0111\u00e3 th\u1eed nghi\u1ec7m n\u00f3 v\u1edbi ba t\u00ecnh hu\u1ed1ng ph\u1ed5 bi\u1ebfn m\u00e0 c\u00e1c Qu\u1ea3n l\u00fd S\u1ea3n ph\u1ea9m v\u00e0 K\u1ef9 s\u01b0 ph\u1ea3i \u0111\u1ed1i m\u1eb7t m\u1ed7i ng\u00e0y: t\u00e0i li\u1ec7u lu\u1ed3ng ng\u01b0\u1eddi d\u00f9ng, b\u1ea3n \u0111\u1ed3 ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng v\u00e0 m\u00f4 h\u00ecnh h\u00f3a c\u1ea5u tr\u00fac d\u1eef li\u1ec7u.<\/p>\n

    V\u00ed d\u1ee5 1: S\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1 cho x\u00e1c th\u1ef1c ng\u01b0\u1eddi d\u00f9ng<\/h3>\n

    Vi\u1ec7c t\u00e0i li\u1ec7u h\u00f3a t\u01b0\u01a1ng t\u00e1c API l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng \u0111\u1ec3 \u0111\u01b0a c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n m\u1edbi v\u00e0o h\u1ec7 th\u1ed1ng. Thay v\u00ec v\u1ebd c\u00e1c h\u1ed9p v\u00e0 m\u0169i t\u00ean th\u1ee7 c\u00f4ng, t\u00f4i \u0111\u00e3 s\u1eed d\u1ee5ng PlantUML trong VPasCode \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a logic c\u1ee7a lu\u1ed3ng \u0111\u0103ng nh\u1eadp ng\u01b0\u1eddi d\u00f9ng.<\/p>\n

    \"\"<\/p>\n

    Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/a><\/p>\n

    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \r\n
    \r\n Plantuml<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Plantuml in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
    \r\n 
    @startuml\r\ntitle Lu\u1ed3ng X\u00e1c th\u1ef1c Ng\u01b0\u1eddi d\u00f9ng\r\nactor Ng\u01b0\u1eddi d\u00f9ng\r\nparticipant \"\u1ee8ng d\u1ee5ng Frontend\" as Frontend\r\nparticipant \"D\u1ecbch v\u1ee5 X\u00e1c th\u1ef1c\" as Auth\r\ndatabase \"C\u01a1 s\u1edf d\u1eef li\u1ec7u Ng\u01b0\u1eddi d\u00f9ng\" as DB\r\n\r\nNg\u01b0\u1eddi d\u00f9ng -> Frontend: Nh\u1eadp Th\u00f4ng tin \u0110\u0103ng nh\u1eadp\r\nFrontend -> Auth: POST \/login\r\nAuth -> DB: Truy v\u1ea5n Ng\u01b0\u1eddi d\u00f9ng\r\nDB --> Auth: Tr\u1ea3 v\u1ec1 D\u1eef li\u1ec7u Ng\u01b0\u1eddi d\u00f9ng\r\nAuth --> Frontend: M\u00e3 JWT\r\nFrontend --> Ng\u01b0\u1eddi d\u00f9ng: Chuy\u1ec3n h\u01b0\u1edbng \u0111\u1ebfn B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/a><\/p>\n
    Sau khi \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, nh\u1ea5p v\u00e0o\u201cG\u1eedi \u0111\u1ebfn lu\u1ed3ng OpenDocs\u201d<\/strong>\u0111\u00e3 \u0111\u1ea9y s\u01a1 \u0111\u1ed3 n\u00e0y tr\u1ef1c ti\u1ebfp v\u00e0o t\u00e0i li\u1ec7u y\u00eau c\u1ea7u k\u1ef9 thu\u1eadt c\u1ee7a t\u00f4i. \u0110i\u1ec1u n\u00e0y lo\u1ea1i b\u1ecf nhu c\u1ea7u xu\u1ea5t PNG, \u0111\u1eb7t t\u00ean ch\u00ednh x\u00e1c v\u00e0 t\u1ea3i l\u00ean th\u1ee7 c\u00f4ng.<\/p>\n
    \"This<\/p>\n
    V\u00ed d\u1ee5 2: S\u01a1 \u0111\u1ed3 Container C4 cho Microservices<\/h3>\n
    \u0110\u1ed1i v\u1edbi c\u00e1c cu\u1ed9c th\u1ea3o lu\u1eadn ki\u1ebfn tr\u00fac c\u1ea5p cao v\u1edbi c\u00e1c b\u00ean li\u00ean quan, m\u00f4 h\u00ecnh C4 l\u00e0 v\u00f4 gi\u00e1. N\u00f3 gi\u00fap l\u00e0m r\u00f5 ranh gi\u1edbi h\u1ec7 th\u1ed1ng m\u00e0 kh\u00f4ng b\u1ecb sa \u0111\u00e0 v\u00e0o chi ti\u1ebft m\u00e3 ngu\u1ed3n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch t\u00f4i \u0111\u00e3 m\u00f4 h\u00ecnh h\u00f3a m\u1ed9t h\u1ec7 th\u1ed1ng ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn \u0111\u01a1n gi\u1ea3n:<\/p>\n
    \"\"<\/p>\n
    Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/a><\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    @startuml\r\n!include <C4\/C4_Context>\r\n!include <C4\/C4_Container>\r\n\r\nPerson(user, \"Kh\u00e1ch h\u00e0ng\", \"S\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn\")\r\n\r\nSystem_Boundary(bank, \"H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\") {\r\n    Container(web_app, \"\u1ee8ng d\u1ee5ng Web\", \"Java, Spring MVC\", \"Cung c\u1ea5p n\u1ed9i dung cho ng\u01b0\u1eddi d\u00f9ng\")\r\n    Container(api, \"Backend API\", \"Java, Spring Boot\", \"X\u1eed l\u00fd logic kinh doanh\")\r\n    ContainerDb(db, \"C\u01a1 s\u1edf d\u1eef li\u1ec7u\", \"SQL\", \"L\u01b0u tr\u1eef t\u00e0i kho\u1ea3n ng\u01b0\u1eddi d\u00f9ng v\u00e0 giao d\u1ecbch\")\r\n}\r\n\r\nRel(user, web_app, \"S\u1eed d\u1ee5ng\")\r\nRel(web_app, api, \"G\u1ecdi qua HTTPS\")\r\nRel(api, db, \"\u0110\u1ecdc\/Vi\u1ebft\")\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/a><\/p>\n
    V\u00ed d\u1ee5 3: S\u01a1 \u0111\u1ed3 l\u1edbp cho qu\u1ea3n l\u00fd s\u1ea3n ph\u1ea9m<\/h3>\n
    Khi x\u00e1c \u0111\u1ecbnh y\u00eau c\u1ea7u s\u1ea3n ph\u1ea9m, s\u1ef1 r\u00f5 r\u00e0ng v\u1ec1 c\u00e1c th\u1ef1c th\u1ec3 d\u1eef li\u1ec7u l\u00e0 \u0111i\u1ec1u quan tr\u1ecdng. T\u00f4i \u0111\u00e3 s\u1eed d\u1ee5ng s\u01a1 \u0111\u1ed3 l\u1edbp \u0111\u1ec3 m\u00f4 h\u00ecnh h\u00f3a m\u1ed9t danh m\u1ee5c s\u1ea3n ph\u1ea9m, l\u00e0m r\u00f5 c\u00e1c m\u1ed1i quan h\u1ec7 gi\u1eefa s\u1ea3n ph\u1ea9m, danh m\u1ee5c v\u00e0 \u0111\u01a1n h\u00e0ng.<\/p>\n
    \"\"<\/p>\n
    Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/a><\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    @startuml\r\nclass Product {\r\n    +String name\r\n    +Double price\r\n    +String sku\r\n    +getDetails()\r\n}\r\n\r\nclass Category {\r\n    +String categoryName\r\n    +List<Product> products\r\n}\r\n\r\nclass Order {\r\n    +int orderId\r\n    +Date orderDate\r\n    +List<Product> items\r\n}\r\n\r\nProduct \"1\" -- \"*\" Category : thu\u1ed9c v\u1ec1\r\nOrder \"1\" -- \"*\" Product : ch\u1ee9a\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nCh\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ch\u1ec9nh s\u1eeda PlantUML trong VPasCode<\/a><\/p>\n\n
    T\u00ednh n\u0103ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi AI: N\u00e2ng cao quy tr\u00ecnh l\u00e0m vi\u1ec7c c\u1ee7a b\u1ea1n<\/h2>\n
    \u0110i\u1ec1u l\u00e0m n\u00ean s\u1ef1 kh\u00e1c bi\u1ec7t c\u1ee7a Visual Paradigm trong l\u0129nh v\u1ef1c n\u00e0y l\u00e0 t\u00edch h\u1ee3p c\u00e1c kh\u1ea3 n\u0103ng AI. Trong qu\u00e1 tr\u00ecnh th\u1eed nghi\u1ec7m, t\u00f4i nh\u1eadn th\u1ea5y ba t\u00ednh n\u0103ng \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch \u0111\u1ec3 t\u0103ng t\u1ed1c qu\u00e1 tr\u00ecnh t\u00e0i li\u1ec7u h\u00f3a:<\/p>\n