{"id":2790,"date":"2026-07-24T16:21:39","date_gmt":"2026-07-24T08:21:39","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/vn\/releases\/typescript-to-uml-class-diagram-generator\/"},"modified":"2026-07-24T16:21:39","modified_gmt":"2026-07-24T08:21:39","slug":"typescript-to-uml-class-diagram-generator","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/vn\/releases\/typescript-to-uml-class-diagram-generator\/","title":{"rendered":"Tr\u1ef1c quan h\u00f3a m\u00e3 TypeScript th\u00e0nh s\u01a1 \u0111\u1ed3 l\u1edbp UML ngay l\u1eadp t\u1ee9c v\u1edbi VPasCode"},"content":{"rendered":"

\"An<\/p>\n

Ch\u00fang t\u00f4i r\u1ea5t h\u00e0o h\u1ee9ng th\u00f4ng b\u00e1o v\u1ec1 m\u1ed9t c\u1ea3i ti\u1ebfn l\u1edbn cho Visual ParadigmVPasCode<\/a>! N\u1ec1n t\u1ea3ng c\u1ee7a ch\u00fang t\u00f4i hi\u1ec7n h\u1ed7 tr\u1ee3 tr\u1ef1c ti\u1ebfp vi\u1ec7c tr\u1ef1c quan h\u00f3a nhi\u1ec1u ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh d\u01b0\u1edbi d\u1ea1ng s\u01a1 \u0111\u1ed3 l\u1edbp UML. Trong b\u1ea3n c\u1eadp nh\u1eadt n\u00e0y, ch\u00fang t\u00f4i h\u1ed7 tr\u1ee3 15 ng\u00f4n ng\u1eef kh\u00e1c nhau\u2014bao g\u1ed3mJava<\/a>, Go<\/a>, Python<\/a>, v\u00e0C#<\/a>\u2014ng\u00e0y h\u00f4m nay, ch\u00fang t\u00f4i t\u1eadp trung v\u00e0oTypeScript<\/a>.<\/p>\n

D\u00f9 b\u1ea1n \u0111ang t\u00e0i li\u1ec7u h\u00f3a m\u1ed9t c\u01a1 s\u1edf m\u00e3 hi\u1ec7n c\u00f3, l\u00ean k\u1ebf ho\u1ea1ch cho m\u1ed9t ki\u1ebfn tr\u00fac m\u1edbi, hay \u0111\u01a1n gi\u1ea3n ch\u1ec9 \u0111ang c\u1ed1 g\u1eafng hi\u1ec3u c\u00e1c m\u1ed1i quan h\u1ec7 h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng ph\u1ee9c t\u1ea1p, vi\u1ec7c chuy\u1ec3n m\u00e3 c\u1ee7a b\u1ea1n th\u00e0nh \u0111\u1ecbnh d\u1ea1ng tr\u1ef1c quan ch\u01b0a bao gi\u1edd d\u1ec5 d\u00e0ng h\u01a1n. N\u1ebfu b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm m\u1ed9t c\u00f4ng c\u1ee5 tr\u1ef1c tuy\u1ebfn \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 v\u1ebd s\u01a1 \u0111\u1ed3TypeScript<\/a>s\u01a1 \u0111\u1ed3, b\u1ea3n c\u1eadp nh\u1eadt n\u00e0y \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ch\u00ednh x\u00e1c d\u00e0nh cho b\u1ea1n.<\/p>\n

VPasCode l\u00e0 g\u00ec?<\/h2>\n

Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n m\u1edbi tham gia h\u1ec7 sinh th\u00e1i c\u1ee7a ch\u00fang t\u00f4i,VPasCode<\/a> (n\u1ec1n t\u1ea3ng s\u01a1 \u0111\u1ed3 m\u00e3 h\u00f3a c\u1ee7a Visual Paradigm) l\u00e0 c\u00f4ng c\u1ee5 th\u1ed1ng nh\u1ea5t v\u1ec1 s\u01a1 \u0111\u1ed3 m\u00e3 h\u00f3a, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 gi\u00fap b\u1ea1n t\u1ea1o ra nh\u1eefng s\u01a1 \u0111\u1ed3 \u1ea5n t\u01b0\u1ee3ng b\u1eb1ng c\u00e1c \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n sang s\u01a1 \u0111\u1ed3 ph\u1ed5 bi\u1ebfn. B\u1eb1ng c\u00e1ch t\u00edch h\u1ee3p c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0PlantUML<\/a>, Mermaid<\/a>, Graphviz<\/a>, v\u00e0ECharts<\/a>v\u00e0o m\u1ed9t m\u00f4i tr\u01b0\u1eddng duy nh\u1ea5t, VPasCode ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t b\u1ed9 d\u1ecbch thu\u1eadt to\u00e0n di\u1ec7n cho d\u1eef li\u1ec7u c\u1ea5u tr\u00fac v\u00e0 m\u00e3 c\u1ee7a b\u1ea1n.<\/p>\n

Tr\u01b0\u1edbc b\u1ea3n c\u1eadp nh\u1eadt n\u00e0y, ng\u01b0\u1eddi d\u00f9ng ch\u1ee7 y\u1ebfu s\u1eed d\u1ee5ng VPasCode \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c DSL v\u1ebd s\u01a1 \u0111\u1ed3 ti\u00eau chu\u1ea9n, d\u1eef li\u1ec7u c\u00f3 c\u1ea5u tr\u00fac (JSON<\/a>, YAML<\/a>), v\u00e0 c\u00e1c l\u01b0\u1ee3c \u0111\u1ed3 c\u01a1 s\u1edf d\u1eef li\u1ec7u (SQL<\/a>). B\u00e2y gi\u1edd, ch\u00fang t\u00f4i \u0111\u00e3 m\u1edf r\u1ed9ng c\u00f4ng c\u1ee5 bi\u1ec3u \u0111\u1ed3 m\u00e3 h\u00f3a th\u1ed1ng nh\u1ea5t c\u1ee7a m\u00ecnh \u0111\u1ec3 ph\u00e2n t\u00edch m\u00e3 ngu\u1ed3n \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf, t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n \u0111\u1ed5i c\u00e1c l\u1edbp, giao di\u1ec7n v\u00e0 ph\u1ee5 thu\u1ed9c c\u1ee7a b\u1ea1n th\u00e0nh k\u00fd hi\u1ec7u UML chu\u1ea9n.<\/p>\n

B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 c\u00e1c kh\u1ea3 n\u0103ng to\u00e0n di\u1ec7n c\u1ee7a n\u1ec1n t\u1ea3ng t\u1ea1i trang trang ch\u1ee7 VPasCode<\/a>.<\/p>\n

C\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a vi\u1ec7c tr\u1ef1c quan h\u00f3a TypeScript th\u00e0nh UML<\/h2>\n

M\u1ee5c ti\u00eau c\u1ee7a ch\u00fang t\u00f4i l\u00e0 l\u00e0m cho qu\u00e1 tr\u00ecnh tr\u1ef1c quan h\u00f3a ho\u00e0n to\u00e0n tr\u01a1n tru. Ch\u00fang t\u00f4i \u0111\u00e3 thi\u1ebft k\u1ebf m\u00f4i tr\u01b0\u1eddng l\u00e0m vi\u1ec7c VPasCode \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t tr\u00ecnh so\u1ea1n th\u1ea3o TypeScript mi\u1ec5n ph\u00ed, c\u00f3 \u0111\u1ed9 nh\u1ea1y cao, tr\u00ecnh so\u1ea1n th\u1ea3o TypeScript mi\u1ec5n ph\u00ed<\/strong>k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t b\u1ed9 \u0111\u1ed9ng l\u1ef1c hi\u1ec3n th\u1ecb th\u1eddi gian th\u1ef1c.<\/p>\n

\"Editing<\/p>\n

Giao di\u1ec7n \u0111\u01a1n gi\u1ea3n v\u00e0 tr\u1ef1c quan: \u1edf ph\u00eda b\u00ean tr\u00e1i giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, b\u1ea1n d\u00e1n ho\u1eb7c nh\u1eadp m\u00e3 TypeScript c\u1ee7a m\u00ecnh. Khi b\u1ea1n g\u00f5, b\u1ed9 x\u1eed l\u00fd s\u1ebd ph\u00e2n t\u00edch c\u1ea5u tr\u00fac h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a b\u1ea1n v\u00e0 ngay l\u1eadp t\u1ee9c hi\u1ec3n th\u1ecb m\u1ed9t s\u01a1 \u0111\u1ed3 l\u1edbp UML chuy\u00ean nghi\u1ec7p \u1edf ph\u00eda b\u00ean ph\u1ea3i m\u00e0n h\u00ecnh.<\/p>\n

B\u1ea1n c\u00f3 t\u1ec7p hi\u1ec7n c\u00f3 mu\u1ed1n tr\u1ef1c quan h\u00f3a? B\u1ea1n th\u1eadm ch\u00ed kh\u00f4ng c\u1ea7n m\u1edf ch\u00fang. Ch\u1ec9 c\u1ea7n k\u00e9o v\u00e0 th\u1ea3 c\u00e1c t\u1ec7p ngu\u1ed3n TypeScript (.ts) c\u1ee7a b\u1ea1n<\/strong>tr\u1ef1c ti\u1ebfp v\u00e0o giao di\u1ec7n VPasCode. H\u1ec7 th\u1ed1ng s\u1ebd t\u1ef1 \u0111\u1ed9ng ph\u00e1t hi\u1ec7n ng\u00f4n ng\u1eef, \u0111i\u1ec1n \u0111\u1ea7y n\u1ed9i dung tr\u00ecnh so\u1ea1n th\u1ea3o v\u00e0 t\u1ea1o s\u01a1 \u0111\u1ed3 t\u01b0\u01a1ng \u1ee9ng trong v\u00e0i mili gi\u00e2y.<\/p>\n

Xem n\u00f3 ho\u1ea1t \u0111\u1ed9ng: C\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p \u0110\u1ed9ng v\u1eadt TypeScript<\/h2>\n

\u0110\u1ec3 minh h\u1ecda m\u1ee9c \u0111\u1ed9 ch\u00ednh x\u00e1c c\u1ee7a c\u00f4ng c\u1ee5 c\u00f4ng c\u1ee5 s\u01a1 \u0111\u1ed3 TypeScript tr\u1ef1c tuy\u1ebfn<\/strong>chuy\u1ec3n \u0111\u1ed5i c\u00e1c kh\u00e1i ni\u1ec7m h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng, h\u00e3y c\u00f9ng xem m\u00f4 h\u00ecnh ph\u00e2n c\u1ea5p \u0111\u1ed9ng v\u1eadt ti\u00eau chu\u1ea9n s\u1eed d\u1ee5ng giao di\u1ec7n, l\u1edbp tr\u1eebu t\u01b0\u1ee3ng, \u0111\u00f3ng g\u00f3i v\u00e0 k\u1ebf th\u1eeba.<\/p>\n

\n
\nTypeScript<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda TypeScript trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n TypeScript<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit TypeScript in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
\/\/ V\u00ed d\u1ee5 c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p \u0111\u1ed9ng v\u1eadt TypeScript\r\ninterface Comparable<T> {\r\n    compareTo(other: T): number;\r\n}\r\n\r\ninterface Playable {\r\n    play(): void;\r\n}\r\n\r\nl\u1edbp tr\u1eebu t\u01b0\u1ee3ng Animal th\u1ef1c hi\u1ec7n Comparable<Animal> {\r\n    b\u1ea3o v\u1ec7 t\u00ean: chu\u1ed7i;\r\n    ri\u00eang tu\u1ed5i: s\u1ed1;\r\n\r\n    constructor(t\u00ean: chu\u1ed7i, tu\u1ed5i: s\u1ed1) {\r\n        this.t\u00ean = t\u00ean;\r\n        this.tu\u1ed5i = tu\u1ed5i;\r\n    }\r\n\r\n    tr\u1eebu t\u01b0\u1ee3ng makeSound(): void;\r\n\r\n    c\u00f4ng khai getInfo(): chu\u1ed7i {\r\n        tr\u1ea3 v\u1ec1 this.t\u00ean + \" l\u00e0 \" + this.tu\u1ed5i + \" tu\u1ed5i\";\r\n    }\r\n\r\n    compareTo(other: Animal): s\u1ed1 {\r\n        tr\u1ea3 v\u1ec1 this.t\u00ean.localeCompare(other.t\u00ean);\r\n    }\r\n}\r\n\r\nclass Dog m\u1edf r\u1ed9ng Animal th\u1ef1c hi\u1ec7n Playable {\r\n    ri\u00eang gi\u1ed1ng: chu\u1ed7i;\r\n    t\u0129nh lo\u00e0i: chu\u1ed7i = \"Canine\";\r\n\r\n    constructor(t\u00ean: chu\u1ed7i, tu\u1ed5i: s\u1ed1, gi\u1ed1ng: chu\u1ed7i) {\r\n        si\u00eau(t\u00ean, tu\u1ed5i);\r\n        this.gi\u1ed1ng = gi\u1ed1ng;\r\n    }\r\n\r\n    makeSound(): void {\r\n        console.log(\"Woof!\");\r\n    }\r\n\r\n    play(): void {\r\n        console.log(this.t\u00ean + \" \u0111ang ch\u01a1i b\u1eaft b\u00f3ng\");\r\n    }\r\n}\r\n\r\nclass Cat m\u1edf r\u1ed9ng Animal th\u1ef1c hi\u1ec7n Playable {\r\n    ri\u00eang m\u00e0uL\u00f4ng: chu\u1ed7i;\r\n\r\n    constructor(t\u00ean: chu\u1ed7i, tu\u1ed5i: s\u1ed1, m\u00e0uL\u00f4ng: chu\u1ed7i) {\r\n        si\u00eau(t\u00ean, tu\u1ed5i);\r\n        this.m\u00e0uL\u00f4ng = m\u00e0uL\u00f4ng;\r\n    }\r\n\r\n    makeSound(): void {\r\n        console.log(\"Meow!\");\r\n    }\r\n\r\n    play(): void {\r\n        console.log(this.t\u00ean + \" \u0111ang ch\u01a1i v\u1edbi ch\u1ec9\");\r\n    }\r\n}\r\n\r\nclass Zoo {\r\n    ri\u00eang \u0111\u1ed9ngV\u1eadt: Animal[];\r\n\r\n    constructor(\u0111\u1ed9ngV\u1eadt: Animal[]) {\r\n        this.\u0111\u1ed9ngV\u1eadt = \u0111\u1ed9ngV\u1eadt;\r\n    }\r\n\r\n    c\u00f4ng khai listAnimals(): void {\r\n        cho m\u1ed7i (a c\u1ee7a this.\u0111\u1ed9ngV\u1eadt) {\r\n            console.log(a.getInfo());\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit TypeScript 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 TypeScript trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Khi b\u1ea1n d\u00e1n m\u00e3 n\u00e0y v\u00e0o VPasCode, n\u00f3 s\u1ebd nh\u1eadn di\u1ec7n ch\u00ednh x\u00e1c l\u1edbp tr\u1eebu t\u01b0\u1ee3ng `Animal`, vi\u1ec7c tri\u1ec3n khai giao di\u1ec7n `Comparable`, v\u00e0 c\u00e1c m\u1ed1i quan h\u1ec7 con v\u1edbi c\u00e1c l\u1edbp `Dog` v\u00e0 `Cat`. N\u00f3 c\u0169ng chuy\u1ec3n \u0111\u1ed5i ch\u00ednh x\u00e1c c\u00e1c thu\u1ed9c t\u00ednh (nh\u01b0 chu\u1ed7i t\u0129nh `species`) v\u00e0 ph\u01b0\u01a1ng th\u1ee9c v\u00e0o c\u00e1c ng\u0103n ti\u00eau chu\u1ea9n UML.<\/p>\n
Mu\u1ed1n t\u1ef1 m\u00ecnh th\u1eed kh\u00f4ng?<\/strong> B\u1ea1n c\u00f3 th\u1ec3 m\u1edf, xem v\u00e0 ch\u1ec9nh s\u1eeda ki\u1ebfn tr\u00fac TypeScript ch\u00ednh x\u00e1c n\u00e0y ngay b\u00e2y gi\u1edd. Nh\u1ea5p v\u00e0o \u0111\u00e2y \u0111\u1ec3 xem b\u1ea3n hi\u1ec3n th\u1ecb tr\u1ef1c ti\u1ebfp<\/a>.<\/p>\n
\u0110\u01b0\u1ee3c x\u00e2y d\u1ef1ng \u0111\u1ec3 t\u0103ng n\u0103ng su\u1ea5t v\u00e0 h\u1ee3p t\u00e1c<\/h2>\n
V\u00ec VPasCode \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 tr\u1edf th\u00e0nh m\u1ed9t tr\u00ecnh so\u1ea1n th\u1ea3o TypeScript mi\u1ec5n ph\u00ed, kh\u00f4ng g\u00e2y c\u1ea3n tr\u1edf, tr\u00ecnh so\u1ea1n th\u1ea3o TypeScript mi\u1ec5n ph\u00ed<\/strong>v\u00e0 trung t\u00e2m tr\u1ef1c quan h\u00f3a, ch\u00fang t\u00f4i \u0111\u00e3 t\u00edch h\u1ee3p m\u1ed9t s\u1ed1 t\u00ednh n\u0103ng \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o c\u00e1c s\u01a1 \u0111\u1ed3 \u0111\u01b0\u1ee3c t\u1ea1o ra c\u1ee7a b\u1ea1n kh\u00f4ng ch\u1ec9 n\u1eb1m trong tr\u00ecnh duy\u1ec7t:<\/p>\n