{"id":11719,"date":"2026-06-26T16:58:28","date_gmt":"2026-06-26T08:58:28","guid":{"rendered":"https:\/\/blog.visual-paradigm.com\/vn\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs\/"},"modified":"2026-07-26T19:58:21","modified_gmt":"2026-07-26T11:58:21","slug":"from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs","status":"publish","type":"post","link":"https:\/\/blog.visual-paradigm.com\/vn\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs\/","title":{"rendered":"T\u1eeb M\u00e3 ngu\u1ed3n \u0111\u1ebfn S\u1ef1 R\u00f5 r\u00e0ng: H\u01b0\u1edbng d\u1eabn cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u v\u1ec1 vi\u1ec7c v\u1ebd s\u01a1 \u0111\u1ed3 li\u1ec1n m\u1ea1ch v\u1edbi VPasCode v\u00e0 OpenDocs"},"content":{"rendered":"

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

Trong th\u1ebf gi\u1edbi ph\u00e1t tri\u1ec3n ph\u1ea7n m\u1ec1m v\u00e0 qu\u1ea3n l\u00fd s\u1ea3n ph\u1ea9m \u0111\u1ea7y t\u1ed1c \u0111\u1ed9, t\u00e0i li\u1ec7u th\u01b0\u1eddng b\u1ecb ch\u1eadm tr\u1ec5 so v\u1edbi m\u00e3 ngu\u1ed3n. C\u00e1c k\u1ef9 s\u01b0 d\u00e0nh h\u00e0ng gi\u1edd \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p, trong khi c\u00e1c nh\u00e0 vi\u1ebft k\u1ef9 thu\u1eadt ph\u1ea3i v\u1eadt l\u1ed9n \u0111\u1ec3 c\u1eadp nh\u1eadt h\u00ecnh \u1ea3nh trong c\u00e1c t\u00e0i li\u1ec7u t\u0129nh. K\u1ebft qu\u1ea3 l\u00e0? C\u00e1c s\u01a1 \u0111\u1ed3 l\u1ed7i th\u1eddi, c\u00e1c li\u00ean k\u1ebft h\u1ecfng v\u00e0 m\u1ed9t c\u01a1 s\u1edf tri th\u1ee9c kh\u00f4ng ph\u1ea3n \u00e1nh \u0111\u00fang th\u1ef1c t\u1ebf.<\/p>\n

H\u00e3y c\u00f9ng kh\u00e1m ph\u00e1\u00a0VPasCode<\/strong>\u00a0v\u00e0\u00a0OpenDocs<\/strong>, hai c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd t\u1eeb Visual Paradigm \u0111ang thay \u0111\u1ed5i ho\u00e0n to\u00e0n tr\u00f2 ch\u01a1i. VPasCode cho ph\u00e9p b\u1ea1n t\u1ea1o ra c\u00e1c s\u01a1 \u0111\u1ed3 phong ph\u00fa, chuy\u00ean nghi\u1ec7p b\u1eb1ng c\u00fa ph\u00e1p v\u0103n b\u1ea3n \u0111\u01a1n gi\u1ea3n (nh\u01b0 PlantUML ho\u1eb7c Mermaid), trong khi OpenDocs ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t n\u1ec1n t\u1ea3ng qu\u1ea3n l\u00fd tri th\u1ee9c \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi AI. \u0110i\u1ec1u k\u1ef3 di\u1ec7u x\u1ea3y ra khi b\u1ea1n k\u1ebft n\u1ed1i ch\u00fang: v\u1edbi t\u00ednh n\u0103ng m\u1edbi\u00a0T\u00edch h\u1ee3p \u1ed0ng d\u1eabn VPasCode sang OpenDocs<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 g\u1eedi s\u01a1 \u0111\u1ed3 tr\u1ef1c ti\u1ebfp t\u1eeb tr\u00ecnh so\u1ea1n th\u1ea3o m\u00e3 ngu\u1ed3n c\u1ee7a m\u00ecnh v\u00e0o t\u00e0i li\u1ec7u ch\u1ec9 b\u1eb1ng m\u1ed9t c\u00fa nh\u1ea5p chu\u1ed9t. Kh\u00f4ng c\u00f2n c\u1ea7n xu\u1ea5t, t\u1ea3i xu\u1ed1ng hay t\u1ea3i l\u1ea1i l\u00ean n\u1eefa. B\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y s\u1ebd d\u1eabn b\u1ea1n t\u1eebng b\u01b0\u1edbc thi\u1ebft l\u1eadp quy tr\u00ecnh n\u00e0y, t\u1ea1o ra c\u00e1c s\u01a1 \u0111\u1ed3 th\u1ef1c t\u1ebf v\u00e0 t\u1eadn d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng AI \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a quy tr\u00ecnh t\u00e0i li\u1ec7u h\u00f3a c\u1ee7a b\u1ea1n.<\/p>\n

\n

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

Tr\u01b0\u1edbc khi b\u1eaft tay v\u00e0o t\u1ea1o s\u01a1 \u0111\u1ed3, h\u00e3y \u0111\u1ea3m b\u1ea3o b\u1ea1n c\u00f3 quy\u1ec1n truy c\u1eadp v\u00e0o c\u00e1c c\u00f4ng c\u1ee5 c\u1ea7n thi\u1ebft.<\/p>\n

    \n
  1. \n

    VPasCode<\/strong>: Truy c\u1eadp\u00a0VPasCode<\/a>\u00a0\u0111\u1ec3 b\u1eaft \u0111\u1ea7u t\u1ea1o h\u00ecnh \u1ea3nh t\u1eeb v\u0103n b\u1ea3n th\u00e0nh s\u01a1 \u0111\u1ed3. C\u00f4ng c\u1ee5 n\u00e0y h\u1ed7 tr\u1ee3 PlantUML, Mermaid.js v\u00e0 Graphviz.<\/p>\n<\/li>\n

  2. \n

    OpenDocs<\/strong>: \u0110i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn\u00a0B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n OpenDocs<\/a>\u00a0\u0111\u1ec3 qu\u1ea3n l\u00fd c\u01a1 s\u1edf tri th\u1ee9c c\u1ee7a \u0111\u1ed9i nh\u00f3m b\u1ea1n.<\/p>\n<\/li>\n

  3. \n

    T\u00e0i kho\u1ea3n Visual Paradigm<\/strong>: \u0110\u1ea3m b\u1ea3o b\u1ea1n c\u00f3 t\u00e0i kho\u1ea3n \u0111ang ho\u1ea1t \u0111\u1ed9ng. Trong khi c\u00e1c g\u00f3i mi\u1ec5n ph\u00ed cung c\u1ea5p kh\u1ea3 n\u0103ng xem tr\u01b0\u1edbc th\u1eddi gian th\u1ef1c v\u00e0 xu\u1ea5t file, c\u00e1c phi\u00ean b\u1ea3n tr\u1ea3 ph\u00ed (Visual Paradigm Online Combo Edition ho\u1eb7c Desktop Professional Edition) s\u1ebd m\u1edf kh\u00f3a c\u00e1c t\u00ednh n\u0103ng AI n\u00e2ng cao nh\u01b0 s\u1eeda l\u1ed7i v\u00e0 d\u1ecbch thu\u1eadt.<\/p>\n<\/li>\n<\/ol>\n

    K\u1ebft n\u1ed1i \u1ed0ng d\u1eabn<\/h3>\n

    T\u00ednh n\u0103ng t\u00edch h\u1ee3p \u0111\u00e3 \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng c\u1ea7n c\u00e1c kh\u00f3a API ph\u1ee9c t\u1ea1p. 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. Khi b\u1ea1n s\u1eb5n s\u00e0ng chia s\u1ebb m\u1ed9t s\u01a1 \u0111\u1ed3, n\u00fat “G\u1eedi \u0111\u1ebfn \u1ed0ng d\u1eabn OpenDocs” trong VPasCode s\u1ebd \u0111\u1ecbnh tuy\u1ebfn an to\u00e0n h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n \u0111\u1ebfn kh\u00f4ng gian l\u00e0m vi\u1ec7c OpenDocs c\u1ee7a b\u1ea1n.<\/p>\n

    \"Seamless<\/p>\n

    \n

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

    H\u00e3y c\u00f9ng kh\u00e1m ph\u00e1 c\u00e1ch t\u1ea1o c\u00e1c s\u01a1 \u0111\u1ed3 th\u1ef1c t\u1ebf b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng PlantUML trong VPasCode. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ba t\u00ecnh hu\u1ed1ng ph\u1ed5 bi\u1ebfn: S\u01a1 \u0111\u1ed3 Th\u1ee9 t\u1ef1 cho t\u01b0\u01a1ng t\u00e1c API, S\u01a1 \u0111\u1ed3 Container C4 cho ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng v\u00e0 S\u01a1 \u0111\u1ed3 L\u1edbp cho m\u00f4 h\u00ecnh h\u00f3a d\u1eef li\u1ec7u.<\/p>\n

    V\u00ed d\u1ee5 1: S\u01a1 \u0111\u1ed3 Th\u1ee9 t\u1ef1 cho X\u00e1c th\u1ef1c Ng\u01b0\u1eddi d\u00f9ng<\/h3>\n

    H\u00e3y t\u01b0\u1edfng t\u01b0\u1ee3ng b\u1ea1n \u0111ang t\u00e0i li\u1ec7u h\u00f3a c\u00e1ch ng\u01b0\u1eddi d\u00f9ng \u0111\u0103ng nh\u1eadp v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. Thay v\u00ec v\u1ebd c\u00e1c h\u1ed9p v\u00e0 m\u0169i t\u00ean th\u1ee7 c\u00f4ng, h\u00e3y vi\u1ebft \u0111o\u1ea1n m\u00e3 PlantUML sau trong VPasCode:<\/p>\n

    \"\"<\/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 Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng\" 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 \u0111\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
    Sau khi \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, nh\u1ea5n\u00a0\u201cG\u1eedi \u0111\u1ebfn Lu\u1ed3ng OpenDocs\u201d<\/strong>\u00a0\u0111\u1ec3 \u0111\u1ea9y s\u01a1 \u0111\u1ed3 n\u00e0y tr\u1ef1c ti\u1ebfp v\u00e0o t\u00e0i li\u1ec7u \u0111\u1eb7c t\u1ea3 k\u1ef9 thu\u1eadt c\u1ee7a b\u1ea1n.<\/p>\n
    \"This<\/p>\n
    V\u00ed d\u1ee5 2: S\u01a1 \u0111\u1ed3 Container C4 cho Microservices<\/h3>\n
    \u0110\u1ed1i v\u1edbi ki\u1ebfn tr\u00fac c\u1ea5p cao, h\u00e3y s\u1eed d\u1ee5ng m\u00f4 h\u00ecnh C4. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u01a1 \u0111\u1ed3 container \u0111\u01a1n gi\u1ea3n cho th\u1ea5y \u1ee9ng d\u1ee5ng web t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u00e1c d\u1ecbch v\u1ee5 ph\u00eda sau:<\/p>\n
    \"\"<\/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
    B\u1ea3n \u0111\u1ed3 h\u00ecnh \u1ea3nh n\u00e0y gi\u00fap c\u00e1c b\u00ean li\u00ean quan hi\u1ec3u 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.<\/p>\n
    V\u00ed d\u1ee5 3: S\u01a1 \u0111\u1ed3 L\u1edbp cho Qu\u1ea3n l\u00fd S\u1ea3n ph\u1ea9m<\/h3>\n
    N\u1ebfu b\u1ea1n \u0111ang m\u00f4 h\u00ecnh h\u00f3a m\u1ed9t danh m\u1ee5c s\u1ea3n ph\u1ea9m, s\u01a1 \u0111\u1ed3 l\u1edbp s\u1ebd l\u00e0m r\u00f5 c\u00e1c m\u1ed1i quan h\u1ec7 gi\u1eefa c\u00e1c th\u1ef1c th\u1ec3:<\/p>\n
    \"\"<\/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 S\u1ea3n ph\u1ea9m {\r\n    +String t\u00ean\r\n    +Double gi\u00e1\r\n    +String m\u00e3SKU\r\n    +getChiTiet()\r\n}\r\n\r\nclass DanhMuc {\r\n    +String tenDanhMuc\r\n    +List<S\u1ea3n ph\u1ea9m> s\u1ea3nPh\u1ea9m\r\n}\r\n\r\nclass \u0110\u01a1nH\u00e0ng {\r\n    +int idDonHang\r\n    +Date ngayDonHang\r\n    +List<S\u1ea3n ph\u1ea9m> m\u1eb7tHang\r\n}\r\n\r\nS\u1ea3n ph\u1ea9m \"1\" -- \"*\" DanhMuc : thu\u1ed9c v\u1ec1\r\n\u0110\u01a1nH\u00e0ng \"1\" -- \"*\" S\u1ea3n ph\u1ea9m : 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
    \n
    T\u00ednh n\u0103ng D\u1ef1a tr\u00ean AI: N\u00e2ng cao Quy tr\u00ecnh L\u00e0m vi\u1ec7c c\u1ee7a B\u1ea1n<\/h2>\n
    Kh\u1ea3 n\u0103ng AI c\u1ee7a Visual Paradigm \u0111\u01b0a vi\u1ec7c v\u1ebd s\u01a1 \u0111\u1ed3 l\u00ean m\u1ed9t t\u1ea7m cao m\u1edbi. N\u1ebfu b\u1ea1n \u0111ang b\u1ebf t\u1eafc ho\u1eb7c mu\u1ed1n t\u0103ng t\u1ed1c qu\u00e1 tr\u00ecnh t\u1ea1o:<\/p>\n