The latest articles on DEV Community by Takaaki Teshima (@takaakit). https://dev.to/takaakit https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F537650%2Ff3d3bdb4-de99-4c4a-91bc-c567a3bf82db.png https://dev.to/takaakit en Takaaki Teshima Tue, 01 Jun 2021 00:22:00 +0000 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-crystal-4j0f https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-crystal-4j0f <p>This post lists UML diagrams of GoF design pattern examples written in Crystal. The UML diagrams are displayed using <em>Diagram Map</em>. If you want to know about <em>Diagram Map</em>, see <a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">this post</a>. Also, you can get UML model data and Crystal code of the examples from <a href="https://github.com/takaakit/design-pattern-examples-in-crystal" rel="noopener noreferrer">here</a>. </p> <h3> Table of Contents </h3> <ul> <li>Behavioral Patterns <ul> <li>Chain of Responsibility</li> <li>Command</li> <li>Interpreter</li> <li>Iterator</li> <li>Mediator</li> <li>Memento</li> <li>Observer</li> <li>State</li> <li>Strategy</li> <li>Template Method</li> <li>Visitor</li> </ul> </li> <li>Creational Patterns <ul> <li>Abstract Factory</li> <li>Builder</li> <li>Factory Method</li> <li>Prototype</li> <li>Singleton</li> </ul> </li> <li>Structural Patterns <ul> <li>Adapter</li> <li>Bridge</li> <li>Composite</li> <li>Decorator</li> <li>Facade</li> <li>Flyweight</li> <li>Proxy</li> </ul> </li> <li>References</li> <li>Links</li> </ul> <h1> Chain of Responsibility <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A trouble is turned around among supporters, and the trouble will be handled by the supporter who can handle it. There are four types of supporters below: <ul> <li>LazySupporter doesn't handle any trouble</li> <li>MoodySupporter handles odd ID troubles</li> <li>SpecialSupporter handles a trouble of the target ID.</li> <li>LimitedSupporter handles troubles below the limit ID.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fchain_of_responsibility%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fchain_of_responsibility%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/chain_of_responsibility" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/amhx10rv/1//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/chain_of_responsibility/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Command <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Encapsulate a request as an object, thereby letting you parametrize clients with different requests, queue or log requests, and support undoable operations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Simple drawing application: <ul> <li>Draw a path with points by dragging the mouse.</li> <li>Revert to one previous drawing by pressing the Undo button.</li> <li>Erase all drawing by pressing the Clear button.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/command" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/xptu8kf4/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/command/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Interpreter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> An interpreter for mini language to operate radio controlled car. It parses the following syntax composed of "forward", "left", "right", and "repeat" commands:<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;program&gt; ::= program &lt;command list&gt; &lt;command list&gt; ::= &lt;command&gt;* end &lt;command&gt; ::= &lt;repeat&gt; | &lt;action&gt; &lt;repeat&gt; ::= repeat &lt;number&gt; &lt;command list&gt; &lt;action&gt; ::= forward | right | left &lt;number&gt; ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/interpreter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/gch7rdtz/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/interpreter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Iterator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Add books in a bookshelf and display the names of the book in turn. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/iterator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/z7jm0Lwa/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/iterator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Mediator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Show a login dialog for entering a username and password. The dialog has the following elements: <ul> <li>"Guest" and "Login" radio buttons</li> <li>"Username" and "Password" text fields</li> <li>"OK" and "Cancel" buttons</li> </ul> <p>And change the editable properties of the elements depending on the state of the radio buttons and text fields.</p> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/mediator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/u1owxegr/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/mediator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Memento <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Without violating encapsulation, capture and externalize an object's internal state so that the object can be returned to this state later (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A dice game in which money increases and decreases: <ul> <li>A gamer shakes a dice and the number determine the next state.</li> <li>If the number of dice is even, gamer's money doubles, and if it is odd, gamer's money is halved.</li> <li>If the gamer's money is less than half of the highest amount, it returns to the highest amount.</li> <li>The game is repeated</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/memento" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/6m03wt18/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/memento/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Observer <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Observers observe a Subject object holding a numerical value and display the value. The display formats are digits and bar charts. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/observer" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/3yo76wng/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/observer/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> State <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Allow an object to alter its behavior when its internal state changes. The object will appear to change its class (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Safe security system that the security status changes with time. When you press a button in a dialog, the message displayed will change depending on whether the time is day or night. The internal time of the dialog advances one hour for every second of real time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/state" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/29yvjctb/1//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/state/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Strategy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from the clients that use it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A game of rock-scissors-paper. Two strategies are available: <ul> <li>Random Strategy: showing a random hand signal.</li> <li>Mirror Strategy: showing a hand signal from the previous opponent's hand signal.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/strategy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/zq6e8sdh/1//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/strategy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Template Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define the skeleton of an algorithm in an operation, deferring some steps to client subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a character or string repeatedly 5 times. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Ftemplate_method%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Ftemplate_method%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/template_method" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/u7n36w9v/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/template_method/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Visitor <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which it operates (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Visitor visits the file system composed of files and directories, and displays a list of files/directories. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/behavioral_patterns/visitor" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/7zsxby8v/1//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/behavioral_patterns/visitor/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Abstract Factory <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide an interface for creating families of related or dependent objects without specifying their concrete classes (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a hierarchical link collection as an HTML file. It can be created in either tabular or list format. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fabstract_factory%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fabstract_factory%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/creational_patterns/abstract_factory" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/2txg3f6h/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/creational_patterns/abstract_factory/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Builder <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Separate the construction of a complex object from its representation so that the same construction process can create different representations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create documents in HTML format and text format. It is possible to create different documents in the same construction process. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/creational_patterns/builder" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/1ebxrdyh/1//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/creational_patterns/builder/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Factory Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> The subject is a factory to make credit cards. The Factory defines how to create an credit card, but the actual credit card is created by the CreditCardFactory. The "createProduct()" is called a Factory Method, and it is responsible for manufacturing an object. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Ffactory_method%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Ffactory_method%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/creational_patterns/factory_method" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/4tsaw0dk/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/creational_patterns/factory_method/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Prototype <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string enclosed with a frame line, or drawn with an underline. The Client (Main) registers instances of the Display subclass in the Manager class. When necessary, the Manager class asks those registered instances to return a clone. The Client (Main) requires the returned clones to display. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/creational_patterns/prototype" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/251hx4mv/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/creational_patterns/prototype/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Singleton <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Ensure a class has only one instance, and provide a global point of access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Check whether the same instance is obtained. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/creational_patterns/singleton" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/b3omnwhz/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/creational_patterns/singleton/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Adapter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display the given string as follows<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>-- Nice to meet you -- </code></pre> </div> <p>or display it as follows.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[[ Nice to meet you ]] </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/adapter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/6vhu5xj8/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/adapter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Bridge <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Decouple an abstraction from its implementation so that the two can vary independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display only one line or display the specified number of lines. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/bridge" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/12xw0np3/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/bridge/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Composite <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Compose objects into tree structures to represent whole-part hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Represents a file system composed of files and directories. FileSystemElement makes it possible to treat File and Directory uniformly. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/composite" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/8ubp01fy/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/composite/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Decorator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string with decorative frames. The frames can be combined arbitrarily. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/decorator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/ej2w1bpk/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/decorator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Facade <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a simple homepage through a Facade (PageCreator). The Facade gets info from the DataLibrary and uses the info to create an HTML file. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/facade" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/b6s8fgLx/1//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/facade/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Flyweight <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Use sharing to support large numbers of fine-grained objects efficiently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string consisting of large characters (0-9 digits only). Large character objects are not created until they are needed. And the created objects are reused. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/flyweight" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/czthj53a/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/flyweight/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Proxy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a surrogate or placeholder for another object to control access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Print on a named printer. Setting and changing the printer name is done by Proxy (ProxyPrinter). At the time of printing, create an instance of the RealSubject (RealPrinter) for the first time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-crystal-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Crystal Code: <a href="https://github.com/takaakit/design-pattern-examples-in-crystal/tree/master/src/structural_patterns/proxy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/atpv1n9k/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-crystal-design-pattern-examples/blob/master/structural_patterns/proxy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> References <a></a> </h1> <ul> <li>Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994</li> <li>Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004</li> </ul> <h1> Links <a></a> </h1> <ul> <li><a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">Diagram Map: tracing UML/SysML elements across diagrams</a></li> <li><a href="https://github.com/takaakit/design-pattern-examples-in-crystal" rel="noopener noreferrer">Design Pattern Examples in Crystal</a></li> </ul> uml gof designpatterns crystal Takaaki Teshima Mon, 24 May 2021 09:56:20 +0000 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-java-5fe5 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-java-5fe5 <p>This post lists UML diagrams of GoF design pattern examples written in Java. The UML diagrams are displayed using <em>Diagram Map</em>. If you want to know about <em>Diagram Map</em>, see <a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">this post</a>. Also, you can get UML model data and Java code of the examples from <a href="https://github.com/takaakit/design-pattern-examples-in-java" rel="noopener noreferrer">here</a>. </p> <h3> Table of Contents </h3> <ul> <li>Behavioral Patterns <ul> <li>Chain of Responsibility</li> <li>Command</li> <li>Interpreter</li> <li>Iterator</li> <li>Mediator</li> <li>Memento</li> <li>Observer</li> <li>State</li> <li>Strategy</li> <li>Template Method</li> <li>Visitor</li> </ul> </li> <li>Creational Patterns <ul> <li>Abstract Factory</li> <li>Builder</li> <li>Factory Method</li> <li>Prototype</li> <li>Singleton</li> </ul> </li> <li>Structural Patterns <ul> <li>Adapter</li> <li>Bridge</li> <li>Composite</li> <li>Decorator</li> <li>Facade</li> <li>Flyweight</li> <li>Proxy</li> </ul> </li> <li>References</li> <li>Links</li> </ul> <h1> Chain of Responsibility <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A trouble is turned around among supporters, and the trouble will be handled by the supporter who can handle it. There are four types of supporters below: <ul> <li>LazySupporter doesn't handle any trouble</li> <li>MoodySupporter handles odd ID troubles</li> <li>SpecialSupporter handles a trouble of the target ID.</li> <li>LimitedSupporter handles troubles below the limit ID.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fchainofresponsibility%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fchainofresponsibility%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/chainofresponsibility" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/76k93wLz/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/chainofresponsibility/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Command <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Encapsulate a request as an object, thereby letting you parametrize clients with different requests, queue or log requests, and support undoable operations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Simple drawing application: <ul> <li>Draw a path with points by dragging the mouse.</li> <li>Revert to one previous drawing by pressing the Undo button.</li> <li>Erase all drawing by pressing the Clear button.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/command" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/bvawdhf8/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/command/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Interpreter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> An interpreter for mini language to operate radio controlled car. It parses the following syntax composed of "forward", "left", "right", and "repeat" commands:<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;program&gt; ::= program &lt;command list&gt; &lt;command list&gt; ::= &lt;command&gt;* end &lt;command&gt; ::= &lt;repeat&gt; | &lt;action&gt; &lt;repeat&gt; ::= repeat &lt;number&gt; &lt;command list&gt; &lt;action&gt; ::= forward | right | left &lt;number&gt; ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/interpreter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/ud7f412s/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/interpreter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Iterator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Add books in a bookshelf and display the names of the book in turn. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/iterator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/ruy2abwm/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/iterator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Mediator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Show a login dialog for entering a username and password. The dialog has the following elements: <ul> <li>"Guest" and "Login" radio buttons</li> <li>"Username" and "Password" text fields</li> <li>"OK" and "Cancel" buttons</li> </ul> <p>And change the editable properties of the elements depending on the state of the radio buttons and text fields.</p> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/mediator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/6y5z3skg/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/mediator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Memento <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Without violating encapsulation, capture and externalize an object's internal state so that the object can be returned to this state later (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A dice game in which money increases and decreases: <ul> <li>A gamer shakes a dice and the number determine the next state.</li> <li>If the number of dice is even, gamer's money doubles, and if it is odd, gamer's money is halved.</li> <li>If the gamer's money is less than half of the highest amount, it returns to the highest amount.</li> <li>The game is repeated</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/memento" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/dps4oynL/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/memento/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Observer <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Observers observe a Subject object holding a numerical value and display the value. The display formats are digits and bar charts. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/observer" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/625zkf8n/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/observer/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> State <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Allow an object to alter its behavior when its internal state changes. The object will appear to change its class (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Safe security system that the security status changes with time. When you press a button in a dialog, the message displayed will change depending on whether the time is day or night. The internal time of the dialog advances one hour for every second of real time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/state" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/nb70ak9q/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/state/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Strategy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from the clients that use it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A game of rock-scissors-paper. Two strategies are available: <ul> <li>Random Strategy: showing a random hand signal.</li> <li>Mirror Strategy: showing a hand signal from the previous opponent's hand signal.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/strategy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/vLr0o6qb/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/strategy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Template Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define the skeleton of an algorithm in an operation, deferring some steps to client subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a character or string repeatedly 5 times. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Ftemplatemethod%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Ftemplatemethod%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/templatemethod" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/qwog56tr/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/templatemethod/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Visitor <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which it operates (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Visitor visits the file system composed of files and directories, and displays a list of files/directories. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioralpatterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/behavioralpatterns/visitor" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/kj7yx8rt/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/behavioralpatterns/visitor/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Abstract Factory <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide an interface for creating families of related or dependent objects without specifying their concrete classes (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a hierarchical link collection as an HTML file. It can be created in either tabular or list format. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fabstractfactory%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fabstractfactory%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/creationalpatterns/abstractfactory" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/bd4ngmfo/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/creationalpatterns/abstractfactory/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Builder <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Separate the construction of a complex object from its representation so that the same construction process can create different representations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create documents in HTML format and text format. It is possible to create different documents in the same construction process. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/creationalpatterns/builder" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/g7srkj35/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/creationalpatterns/builder/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Factory Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> The subject is a factory to make credit cards. The Factory defines how to create an credit card, but the actual credit card is created by the CreditCardFactory. The "createProduct()" is called a Factory Method, and it is responsible for manufacturing an object. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Ffactorymethod%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Ffactorymethod%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/creationalpatterns/factorymethod" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/37fvr6xh/6//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/creationalpatterns/factorymethod/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Prototype <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string enclosed with a frame line, or drawn with an underline. The Client (Main) registers instances of the Display subclass in the Manager class. When necessary, the Manager class asks those registered instances to return a clone. The Client (Main) requires the returned clones to display. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/creationalpatterns/prototype" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/of1Lshpe/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/creationalpatterns/prototype/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Singleton <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Ensure a class has only one instance, and provide a global point of access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Check whether the same instance is obtained. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fcreationalpatterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/creationalpatterns/singleton" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/3uqpxah0/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/creationalpatterns/singleton/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Adapter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display the given string as follows<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>-- Nice to meet you -- </code></pre> </div> <p>or display it as follows.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[[ Nice to meet you ]] </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/adapter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/rogtmce2/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/adapter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Bridge <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Decouple an abstraction from its implementation so that the two can vary independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display only one line or display the specified number of lines. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/bridge" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/bckgzqt1/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/bridge/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Composite <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Compose objects into tree structures to represent whole-part hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Represents a file system composed of files and directories. FileSystemElement makes it possible to treat File and Directory uniformly. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/composite" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/ecfm1w6y/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/composite/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Decorator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string with decorative frames. The frames can be combined arbitrarily. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/decorator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/1xh7euwo/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/decorator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Facade <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a simple homepage through a Facade (PageCreator). The Facade gets info from the DataLibrary and uses the info to create an HTML file. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/facade" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/qs7azjen/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/facade/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Flyweight <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Use sharing to support large numbers of fine-grained objects efficiently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string consisting of large characters (0-9 digits only). Large character objects are not created until they are needed. And the created objects are reused. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/flyweight" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/eLzk75ct/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/flyweight/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Proxy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a surrogate or placeholder for another object to control access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Print on a named printer. Setting and changing the printer name is done by Proxy (ProxyPrinter). At the time of printing, create an instance of the RealSubject (RealPrinter) for the first time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-java-design-pattern-examples%2Fblob%2Fmaster%2Fstructuralpatterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Java Code: <a href="https://github.com/takaakit/design-pattern-examples-in-java/tree/master/src/main/java/structuralpatterns/proxy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/0kfg2yub/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples/blob/master/structuralpatterns/proxy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> References <a></a> </h1> <ul> <li>Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994</li> <li>Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004</li> </ul> <h1> Links <a></a> </h1> <ul> <li><a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">Diagram Map: tracing UML/SysML elements across diagrams</a></li> <li><a href="https://github.com/takaakit/design-pattern-examples-in-java" rel="noopener noreferrer">Design Pattern Examples in Java</a></li> </ul> uml gof designpatterns java Takaaki Teshima Mon, 17 May 2021 12:44:33 +0000 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-typescript-46d5 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-typescript-46d5 <p>This post lists UML diagrams of GoF design pattern examples written in TypeScript. The UML diagrams are displayed using <em>Diagram Map</em>. If you want to know about <em>Diagram Map</em>, see <a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">this post</a>. Also, you can get UML model data and TypeScript code of the examples from <a href="https://github.com/takaakit/design-pattern-examples-in-typescript" rel="noopener noreferrer">here</a>. </p> <h3> Table of Contents </h3> <ul> <li>Behavioral Patterns <ul> <li>Chain of Responsibility</li> <li>Command</li> <li>Interpreter</li> <li>Iterator</li> <li>Mediator</li> <li>Memento</li> <li>Observer</li> <li>State</li> <li>Strategy</li> <li>Template Method</li> <li>Visitor</li> </ul> </li> <li>Creational Patterns <ul> <li>Abstract Factory</li> <li>Builder</li> <li>Factory Method</li> <li>Prototype</li> <li>Singleton</li> </ul> </li> <li>Structural Patterns <ul> <li>Adapter</li> <li>Bridge</li> <li>Composite</li> <li>Decorator</li> <li>Facade</li> <li>Flyweight</li> <li>Proxy</li> </ul> </li> <li>References</li> <li>Links</li> </ul> <h1> Chain of Responsibility <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A trouble is turned around among supporters, and the trouble will be handled by the supporter who can handle it. There are four types of supporters below: <ul> <li>LazySupporter doesn't handle any trouble</li> <li>MoodySupporter handles odd ID troubles</li> <li>SpecialSupporter handles a trouble of the target ID.</li> <li>LimitedSupporter handles troubles below the limit ID.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fchain-of-responsibility%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fchain-of-responsibility%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/chain-of-responsibility" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/9zk4faog/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/chain-of-responsibility/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Command <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Encapsulate a request as an object, thereby letting you parametrize clients with different requests, queue or log requests, and support undoable operations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Simple drawing application: <ul> <li>Draw a path with points by dragging the mouse.</li> <li>Revert to one previous drawing by pressing the Undo button.</li> <li>Erase all drawing by pressing the Clear button.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/command" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/6b4nvscm/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/command/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Interpreter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> An interpreter for mini language to operate radio controlled car. It parses the following syntax composed of "forward", "left", "right", and "repeat" commands:<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;program&gt; ::= program &lt;command list&gt; &lt;command list&gt; ::= &lt;command&gt;* end &lt;command&gt; ::= &lt;repeat&gt; | &lt;action&gt; &lt;repeat&gt; ::= repeat &lt;number&gt; &lt;command list&gt; &lt;action&gt; ::= forward | right | left &lt;number&gt; ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/interpreter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/5f9u1Lmy/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/interpreter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Iterator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Add books in a bookshelf and display the names of the book in turn. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/iterator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/r20hcqzg/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/iterator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Mediator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Show a login dialog for entering a username and password. The dialog has the following elements: <ul> <li>"Guest" and "Login" radio buttons</li> <li>"Username" and "Password" text fields</li> <li>"OK" and "Cancel" buttons</li> </ul> <p>And change the editable properties of the elements depending on the state of the radio buttons and text fields.</p> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/mediator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/kdgw0var/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/mediator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Memento <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Without violating encapsulation, capture and externalize an object's internal state so that the object can be returned to this state later (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A dice game in which money increases and decreases: <ul> <li>A gamer shakes a dice and the number determine the next state.</li> <li>If the number of dice is even, gamer's money doubles, and if it is odd, gamer's money is halved.</li> <li>If the gamer's money is less than half of the highest amount, it returns to the highest amount.</li> <li>The game is repeated</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/memento" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/udwzpn2a/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/memento/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Observer <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Observers observe a Subject object holding a numerical value and display the value. The display formats are digits and bar charts. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/observer" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/a5md90gz/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/observer/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> State <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Allow an object to alter its behavior when its internal state changes. The object will appear to change its class (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Safe security system that the security status changes with time. When you press a button in a dialog, the message displayed will change depending on whether the time is day or night. The internal time of the dialog advances one hour for every second of real time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/state" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/L3yhe8of/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/state/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Strategy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from the clients that use it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A game of rock-scissors-paper. Two strategies are available: <ul> <li>Random Strategy: showing a random hand signal.</li> <li>Mirror Strategy: showing a hand signal from the previous opponent's hand signal.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/strategy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/kyLve8go/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/strategy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Template Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define the skeleton of an algorithm in an operation, deferring some steps to client subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a character or string repeatedly 5 times. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Ftemplate-method%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Ftemplate-method%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/template-method" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/bcnt8qra/6//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/template-method/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Visitor <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which it operates (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Visitor visits the file system composed of files and directories, and displays a list of files/directories. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral-patterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/visitor" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/c24b3rda/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/visitor/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Abstract Factory <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide an interface for creating families of related or dependent objects without specifying their concrete classes (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a hierarchical link collection as an HTML file. It can be created in either tabular or list format. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fabstract-factory%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fabstract-factory%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/abstract-factory" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/ews91mcL/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/abstract-factory/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Builder <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Separate the construction of a complex object from its representation so that the same construction process can create different representations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create documents in HTML format and text format. It is possible to create different documents in the same construction process. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/builder" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/fra9yu5m/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/builder/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Factory Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> The subject is a factory to make credit cards. The Factory defines how to create an credit card, but the actual credit card is created by the CreditCardFactory. The "createProduct()" is called a Factory Method, and it is responsible for manufacturing an object. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Ffactory-method%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Ffactory-method%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/factory-method" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/rfg8t4dx/7//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/factory-method/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Prototype <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string enclosed with a frame line, or drawn with an underline. The Client (Main) registers instances of the Display subclass in the Manager class. When necessary, the Manager class asks those registered instances to return a clone. The Client (Main) requires the returned clones to display. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/prototype" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/p8z5dasv/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/prototype/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Singleton <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Ensure a class has only one instance, and provide a global point of access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Check whether the same instance is obtained. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fcreational-patterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/singleton" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/3o9xz8mh/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/singleton/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Adapter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display the given string as follows<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>-- Nice to meet you -- </code></pre> </div> <p>or display it as follows.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[[ Nice to meet you ]] </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/adapter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/huscqp84/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/adapter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Bridge <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Decouple an abstraction from its implementation so that the two can vary independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display only one line or display the specified number of lines. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/bridge" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/3t7uy2av/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/bridge/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Composite <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Compose objects into tree structures to represent whole-part hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Represents a file system composed of files and directories. FileSystemElement makes it possible to treat File and Directory uniformly. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/composite" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/9wsxz4Lb/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/composite/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Decorator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string with decorative frames. The frames can be combined arbitrarily. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/decorator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/qu769pxy/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/decorator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Facade <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a simple homepage through a Facade (PageCreator). The Facade gets info from the DataLibrary and uses the info to create an HTML file. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/facade" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/gzp6c89d/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/facade/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Flyweight <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Use sharing to support large numbers of fine-grained objects efficiently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string consisting of large characters (0-9 digits only). Large character objects are not created until they are needed. And the created objects are reused. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/flyweight" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/5su60q8b/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/flyweight/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Proxy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a surrogate or placeholder for another object to control access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Print on a named printer. Setting and changing the printer name is done by Proxy (ProxyPrinter). At the time of printing, create an instance of the RealSubject (RealPrinter) for the first time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-typescript-design-pattern-examples%2Fblob%2Fmaster%2Fstructural-patterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>TypeScript Code: <a href="https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/proxy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/sfvo96k3/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/proxy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> References <a></a> </h1> <ul> <li>Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994</li> <li>Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004</li> </ul> <h1> Links <a></a> </h1> <ul> <li><a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">Diagram Map: tracing UML/SysML elements across diagrams</a></li> <li><a href="https://github.com/takaakit/design-pattern-examples-in-typescript" rel="noopener noreferrer">Design Pattern Examples in TypeScript</a></li> </ul> uml gof designpatterns typescript Takaaki Teshima Mon, 10 May 2021 04:47:47 +0000 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-python-4j40 https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-python-4j40 <p>This post lists UML diagrams of GoF design pattern examples written in Python. The UML diagrams are displayed using <em>Diagram Map</em>. If you want to know about <em>Diagram Map</em>, see <a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">this post</a>. Also, you can get UML model data and Python code of the examples from <a href="https://github.com/takaakit/design-pattern-examples-in-python" rel="noopener noreferrer">here</a>. </p> <h3> Table of Contents </h3> <ul> <li>Behavioral Patterns <ul> <li>Chain of Responsibility</li> <li>Command</li> <li>Interpreter</li> <li>Iterator</li> <li>Mediator</li> <li>Memento</li> <li>Observer</li> <li>State</li> <li>Strategy</li> <li>Template Method</li> <li>Visitor</li> </ul> </li> <li>Creational Patterns <ul> <li>Abstract Factory</li> <li>Builder</li> <li>Factory Method</li> <li>Prototype</li> <li>Singleton</li> </ul> </li> <li>Structural Patterns <ul> <li>Adapter</li> <li>Bridge</li> <li>Composite</li> <li>Decorator</li> <li>Facade</li> <li>Flyweight</li> <li>Proxy</li> </ul> </li> <li>References</li> <li>Links</li> </ul> <h1> Chain of Responsibility <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A trouble is turned around among supporters, and the trouble will be handled by the supporter who can handle it. There are four types of supporters below: <ul> <li>LazySupporter doesn't handle any trouble</li> <li>MoodySupporter handles odd ID troubles</li> <li>SpecialSupporter handles a trouble of the target ID.</li> <li>LimitedSupporter handles troubles below the limit ID.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fchain_of_responsibility%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fchain_of_responsibility%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/chain_of_responsibility" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/kcLa7su0/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/chain_of_responsibility/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Command <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Encapsulate a request as an object, thereby letting you parametrize clients with different requests, queue or log requests, and support undoable operations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Simple drawing application: <ul> <li>Draw a path with points by dragging the mouse.</li> <li>Revert to one previous drawing by pressing the Undo button.</li> <li>Erase all drawing by pressing the Clear button.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fcommand%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/command" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/r8b3g7sv/6//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/command/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Interpreter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> An interpreter for mini language to operate radio controlled car. It parses the following syntax composed of "forward", "left", "right", and "repeat" commands:<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;program&gt; ::= program &lt;command list&gt; &lt;command list&gt; ::= &lt;command&gt;* end &lt;command&gt; ::= &lt;repeat&gt; | &lt;action&gt; &lt;repeat&gt; ::= repeat &lt;number&gt; &lt;command list&gt; &lt;action&gt; ::= forward | right | left &lt;number&gt; ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Finterpreter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/interpreter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/n1L23exs/6//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/interpreter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Iterator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Add books in a bookshelf and display the names of the book in turn. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fiterator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/iterator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/skmxbufq/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/iterator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Mediator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Show a login dialog for entering a username and password. The dialog has the following elements: <ul> <li>"Guest" and "Login" radio buttons</li> <li>"Username" and "Password" text fields</li> <li>"OK" and "Cancel" buttons</li> </ul> <p>And change the editable properties of the elements depending on the state of the radio buttons and text fields.</p> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmediator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/mediator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/xdykgenz/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/mediator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Memento <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Without violating encapsulation, capture and externalize an object's internal state so that the object can be returned to this state later (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A dice game in which money increases and decreases: <ul> <li>A gamer shakes a dice and the number determine the next state.</li> <li>If the number of dice is even, gamer's money doubles, and if it is odd, gamer's money is halved.</li> <li>If the gamer's money is less than half of the highest amount, it returns to the highest amount.</li> <li>The game is repeated</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fmemento%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/memento" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/pr6Lnxhy/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/memento/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Observer <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Observers observe a Subject object holding a numerical value and display the value. The display formats are digits and bar charts. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fobserver%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/observer" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/ucg97a86/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/observer/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> State <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Allow an object to alter its behavior when its internal state changes. The object will appear to change its class (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Safe security system that the security status changes with time. When you press a button in a dialog, the message displayed will change depending on whether the time is day or night. The internal time of the dialog advances one hour for every second of real time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstate%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/state" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/L9wnbjea/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/state/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Strategy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from the clients that use it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> A game of rock-scissors-paper. Two strategies are available: <ul> <li>Random Strategy: showing a random hand signal.</li> <li>Mirror Strategy: showing a hand signal from the previous opponent's hand signal.</li> </ul> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fstrategy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/strategy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/axzt2whr/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/strategy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Template Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define the skeleton of an algorithm in an operation, deferring some steps to client subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a character or string repeatedly 5 times. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Ftemplate_method%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Ftemplate_method%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/template_method" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/Lpct80wd/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/template_method/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Visitor <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which it operates (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Visitor visits the file system composed of files and directories, and displays a list of files/directories. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fbehavioral_patterns%2Fvisitor%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/behavioral_patterns/visitor" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/yt6bh847/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/behavioral_patterns/visitor/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Abstract Factory <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide an interface for creating families of related or dependent objects without specifying their concrete classes (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a hierarchical link collection as an HTML file. It can be created in either tabular or list format. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fabstract_factory%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fabstract_factory%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/creational_patterns/abstract_factory" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/bdf83h10/4//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/creational_patterns/abstract_factory/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Builder <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Separate the construction of a complex object from its representation so that the same construction process can create different representations (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create documents in HTML format and text format. It is possible to create different documents in the same construction process. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fbuilder%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/creational_patterns/builder" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/z4asqhc1/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/creational_patterns/builder/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Factory Method <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> The subject is a factory to make credit cards. The Factory defines how to create an credit card, but the actual credit card is created by the CreditCardFactory. The "createProduct()" is called a Factory Method, and it is responsible for manufacturing an object. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Ffactory_method%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Ffactory_method%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/creational_patterns/factory_method" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/e0ymt21f/6//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/creational_patterns/factory_method/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Prototype <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string enclosed with a frame line, or drawn with an underline. The Client (Main) registers instances of the Display subclass in the Manager class. When necessary, the Manager class asks those registered instances to return a clone. The Client (Main) requires the returned clones to display. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fprototype%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/creational_patterns/prototype" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/dzy73nk4/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/creational_patterns/prototype/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Singleton <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Ensure a class has only one instance, and provide a global point of access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Check whether the same instance is obtained. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fcreational_patterns%2Fsingleton%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/creational_patterns/singleton" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/71m0ucy5/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/creational_patterns/singleton/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Adapter <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display the given string as follows<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>-- Nice to meet you -- </code></pre> </div> <p>or display it as follows.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[[ Nice to meet you ]] </code></pre> </div> <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fadapter%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/adapter" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/utp3mbjo/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/adapter/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Bridge <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Decouple an abstraction from its implementation so that the two can vary independently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display only one line or display the specified number of lines. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fbridge%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/bridge" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/g7dphf6e/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/bridge/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Composite <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Compose objects into tree structures to represent whole-part hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Represents a file system composed of files and directories. FileSystemElement makes it possible to treat File and Directory uniformly. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fcomposite%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/composite" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/q8hudxfm/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/composite/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Decorator <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string with decorative frames. The frames can be combined arbitrarily. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fdecorator%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/decorator" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/2sko5rwy/3//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/decorator/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Facade <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Create a simple homepage through a Facade (PageCreator). The Facade gets info from the DataLibrary and uses the info to create an HTML file. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Ffacade%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/facade" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/nfh5kmge/2//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/facade/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Flyweight <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Use sharing to support large numbers of fine-grained objects efficiently (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Display a string consisting of large characters (0-9 digits only). Large character objects are not created until they are needed. And the created objects are reused. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fflyweight%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/flyweight" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/d680tLjr/5//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/flyweight/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> Proxy <a></a> </h1> <p> <strong>Pattern Intent</strong> <br> Provide a surrogate or placeholder for another object to control access to it (Design Patterns: Elements of Reusable Object-Oriented Software).<br> </p> <p> <strong>About This Example</strong> <br> Print on a named printer. Setting and changing the printer name is done by Proxy (ProxyPrinter). At the time of printing, create an instance of the RealSubject (RealPrinter) for the first time. <p>Execution Result:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Ftakaakit%2Fuml-diagram-for-python-design-pattern-examples%2Fblob%2Fmaster%2Fstructural_patterns%2Fproxy%2FExecutionResult.png%3Fraw%3Dtrue" alt="Execution Result" width="800" height="400"></a></p> <p>Python Code: <a href="https://github.com/takaakit/design-pattern-examples-in-python/tree/master/structural_patterns/proxy" rel="noopener noreferrer">View on GitHub</a></p> </p> <p><iframe src="https://jsfiddle.net/takaakit2021/k72xzr49/7//embedded/result//dark" width="100%" height="600"> </iframe> <br> <a href="https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-python-design-pattern-examples/blob/master/structural_patterns/proxy/DiagramMap.html" rel="noopener noreferrer">Open the diagram in full screen</a></p> <h1> References <a></a> </h1> <ul> <li>Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994</li> <li>Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004</li> </ul> <h1> Links <a></a> </h1> <ul> <li><a href="https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7">Diagram Map: tracing UML/SysML elements across diagrams</a></li> <li><a href="https://github.com/takaakit/design-pattern-examples-in-python" rel="noopener noreferrer">Design Pattern Examples in Python</a></li> </ul> uml gof designpatterns python Takaaki Teshima Mon, 14 Dec 2020 04:21:25 +0000 https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7 https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7 <p>This article introduces Diagram Map (a term I coined) that makes it easier to trace UML model elements across diagrams. The Diagram Map displays different types of UML diagrams together and highlights links between model elements and diagrams. I think the Diagram Map helps you understand the contents of the UML diagrams. </p> <h2> Demo </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy8hz8m0js7l8q9zcztlk.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy8hz8m0js7l8q9zcztlk.gif" alt="Diagram Map" width="800" height="576"></a></p> <p>You can try many Diagram Map examples on <a href="https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples" rel="noopener noreferrer">this GitHub project</a>.</p> <h2> Features </h2> <ul> <li>Diagram Map displays different kinds of diagrams together and lays out the same kind of diagrams in the same row. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fnbgllzt936vpb76zxsdc.png" width="500" height="287"> </li> <li>Diagram Map shows the following: <ul> <li> <strong>Links</strong> between UML elements of the same type. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjxvphrzv8haapc1k7cox.png" width="300" height="220"> </li> <li> <strong>References</strong> between elements and diagrams. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fq6ncmo45w0fdvtcnemi7.png" width="400" height="199"> </li> <li> <strong>Hyperlinks</strong> in the tooltip text. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpduwlc9q9qcivc09x3i2.png" width="300" height="172"> </li> </ul> </li> <li>You can zoom and pan using a mouse on a Diagram Map like Google Maps. You need to have JavaScript enabled in your browser.</li> </ul> <h2> How to create </h2> <p>You can create a Diagram Map by using <a href="https://sites.google.com/view/m-plus-plugin/home" rel="noopener noreferrer">my plug-in (m plus)</a> in a modeling tool <a href="https://astah.net/products/" rel="noopener noreferrer">Astah</a>. The plug-in is FREE to use for both Personal and Commercial purposes. Astah is free (Free Student License) or paid. The creation procedure is as follows:</p> <ol> <li>Install the modeling tool <a href="https://astah.net/downloads/" rel="noopener noreferrer">Astah UML/Professional</a>, download <a href="https://sites.google.com/view/m-plus-plugin/download" rel="noopener noreferrer">m plus plug-in</a>, and add the plug-in to Astah. - <a href="https://astahblog.com/2014/12/15/astah_plugins/" rel="noopener noreferrer">How to add a plug-in to Astah</a>.</li> <li>Create models and diagrams with Astah.</li> <li>Select diagrams in the model browser and press the "Create Diagram Map" button. If you select packages, all the diagrams under them will be processed. After you press the button, a Diagram Map will be created and be opened in a browser. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcq58i7l3ywsdbatx23eb.png" width="578" height="336"> </li> </ol> <h2> Other </h2> <ul> <li>The Diagram Map is for viewing only. If you want to edit a model or diagram, do so with Astah.</li> <li>You have to use Astah to create a Diagram Map. Support for other modeling tools is a future consideration.</li> <li>The m plus plug-in is a closed source now. Open-sourcing is a future consideration, too.</li> </ul> <h2> Links </h2> <ul> <li><a href="https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples" rel="noopener noreferrer">Diagram Map examples</a></li> <li><a href="https://astah.net/downloads/" rel="noopener noreferrer">Astah downloads</a></li> <li><a href="https://sites.google.com/view/m-plus-plugin/download" rel="noopener noreferrer">m plus plug-in downloads</a></li> </ul> <p>Happy modeling!</p> showdev uml traceability javascript