├── README.md ├── behavioral-patterns ├── chain-of-responsibility │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── command │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── interpreter │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── iterator │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── mediator │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── memento │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── observer │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── state │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── strategy │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── template-method │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png └── visitor │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── creational-patterns ├── abstract-factory │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── builder │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── factory-method │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png ├── prototype │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png └── singleton │ ├── diagram_map.html │ ├── diagram_map.svg │ └── execution_result.png └── structural-patterns ├── adapter ├── diagram_map.html ├── diagram_map.svg └── execution_result.png ├── bridge ├── diagram_map.html ├── diagram_map.svg └── execution_result.png ├── composite ├── diagram_map.html ├── diagram_map.svg └── execution_result.png ├── decorator ├── diagram_map.html ├── diagram_map.svg └── execution_result.png ├── facade ├── diagram_map.html ├── diagram_map.svg └── execution_result.png ├── flyweight ├── diagram_map.html ├── diagram_map.svg └── execution_result.png └── proxy ├── diagram_map.html ├── diagram_map.svg └── execution_result.png /README.md: -------------------------------------------------------------------------------- 1 | UML Diagram for TypeScript Design Pattern Examples 2 | === 3 | 4 | This project lists UML diagrams of the "[Design Pattern Examples in TypeScript](https://github.com/takaakit/design-pattern-examples-in-typescript)". When you click on a diagram image, the diagram will be opened in **Diagram Map**. If you want to know about Diagram Map, see [this post](https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7). 5 | 6 | Behavioral Patterns 7 | --- 8 | | | | | 9 | | :---: | :---: | :---: | 10 | | **Chain of Responsibility** | **Command** | **Interpreter** | 11 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | 12 | | **Iterator** | **Mediator** | **Memento** | 13 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | 14 | | **Observer** | **State** | **Strategy** | 15 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | 16 | | **Template Method** | **Visitor** | | 17 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | | 18 | 19 | Creational Patterns 20 | --- 21 | | | | | 22 | | :---: | :---: | :---: | 23 | | **Abstract Factory** | **Builder** | **Factory Method** | 24 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | 25 | | **Prototype** | **Singleton** | | 26 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | | 27 | 28 | Structural Patterns 29 | --- 30 | | | | | 31 | | :---: | :---: | :---: | 32 | | **Adapter** | **Bridge** | **Composite** | 33 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | 34 | | **Decorator** | **Facade** | **Flyweight** | 35 | |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result |
TypeScript Code
Execution Result | 36 | | **Proxy** | | | 37 | |
TypeScript Code
Execution Result | | | 38 | 39 | 40 | References 41 | --- 42 | * Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994 43 | * Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004 44 | 45 | Links 46 | --- 47 | * [Design Pattern Examples in TypeScript](https://github.com/takaakit/design-pattern-examples-in-typescript) 48 | * [Diagram Map: tracing UML elements across diagrams](https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7) 49 | 50 | License 51 | --- 52 | Diagram Map file (diagram_map.html) includes the following libraries: 53 | * [D3.js](https://d3js.org) is copyrighted by Mike Bostock and is released under the [BSD license](https://opensource.org/licenses/BSD-3-Clause). 54 | * [Popper.js](https://popper.js.org) is copyrighted by Federico Zivolo and is released under the [MIT license](https://opensource.org/licenses/MIT). 55 | * [Tippy.js](https://atomiks.github.io/tippyjs) is copyrighted by atomiks and is released under the [MIT license](https://opensource.org/licenses/MIT). 56 | * [Chroma.js](https://gka.github.io/chroma.js) is copyrighted by Gregor Aisch and is released under the [BSD license](https://opensource.org/licenses/BSD-3-Clause). 57 | * [Three.js](https://threejs.org) is copyrighted by three.js authors and is released under the [MIT license](https://opensource.org/licenses/MIT). 58 | * [Vanta.js](https://www.vantajs.com) is copyrighted by Teng Bao and is released under the [MIT license](https://opensource.org/licenses/MIT). 59 | 60 | Files and data in this project other than the above libraries are under the [Creative Commons Zero (CC0) license](https://creativecommons.org/publicdomain/zero/1.0/). 61 | 62 | Other Language Examples 63 | ----------------------- 64 | [C++](https://github.com/takaakit/uml-diagram-for-cpp-design-pattern-examples), [C#](https://github.com/takaakit/uml-diagram-for-csharp-design-pattern-examples), [Crystal](https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples), [Go](https://github.com/takaakit/uml-diagram-for-golang-design-pattern-examples), [Java](https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples), [JavaScript](https://github.com/takaakit/uml-diagram-for-javascript-design-pattern-examples), [Kotlin](https://github.com/takaakit/uml-diagram-for-kotlin-design-pattern-examples), [Python](https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples), [Ruby](https://github.com/takaakit/uml-diagram-for-ruby-design-pattern-examples), [Scala](https://github.com/takaakit/uml-diagram-for-scala-design-pattern-examples), [Swift](https://github.com/takaakit/uml-diagram-for-swift-design-pattern-examples) 65 | -------------------------------------------------------------------------------- /behavioral-patterns/chain-of-responsibility/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/chain-of-responsibility/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/command/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/command/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/interpreter/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/interpreter/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/iterator/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/iterator/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/mediator/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/mediator/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/memento/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/memento/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/observer/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/observer/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/state/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/state/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/strategy/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/strategy/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/template-method/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/template-method/execution_result.png -------------------------------------------------------------------------------- /behavioral-patterns/visitor/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/behavioral-patterns/visitor/execution_result.png -------------------------------------------------------------------------------- /creational-patterns/abstract-factory/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/creational-patterns/abstract-factory/execution_result.png -------------------------------------------------------------------------------- /creational-patterns/builder/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/creational-patterns/builder/execution_result.png -------------------------------------------------------------------------------- /creational-patterns/factory-method/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/creational-patterns/factory-method/execution_result.png -------------------------------------------------------------------------------- /creational-patterns/prototype/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/creational-patterns/prototype/execution_result.png -------------------------------------------------------------------------------- /creational-patterns/singleton/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/creational-patterns/singleton/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/adapter/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/adapter/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/bridge/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/bridge/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/composite/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/composite/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/decorator/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/decorator/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/facade/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/facade/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/flyweight/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/flyweight/execution_result.png -------------------------------------------------------------------------------- /structural-patterns/proxy/execution_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/ba418bdf9f4757ab2191a973b3487cb5c266e571/structural-patterns/proxy/execution_result.png --------------------------------------------------------------------------------