Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Left-Aligned Organizational Change Flowchart</title> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script> | |
| <script> | |
| mermaid.initialize({ startOnLoad: true, theme: 'forest' }); | |
| </script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| color: #333; | |
| line-height: 1.6; | |
| padding: 20px; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| } | |
| header { | |
| background: #2c3e50; | |
| color: white; | |
| padding: 25px; | |
| text-align: center; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 30px; | |
| } | |
| .description { | |
| margin-bottom: 30px; | |
| padding: 20px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .description p { | |
| margin-bottom: 15px; | |
| font-size: 1.1rem; | |
| } | |
| .flowchart-container { | |
| width: 100%; | |
| overflow: auto; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .mermaid { | |
| width: 100%; | |
| min-width: 1200px; | |
| padding: 15px; | |
| } | |
| .legend { | |
| margin-top: 30px; | |
| padding: 20px; | |
| background: #e8f4fc; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .legend h3 { | |
| color: #2c3e50; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid #3498db; | |
| } | |
| .legend-items { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| margin-right: 20px; | |
| } | |
| .color-box { | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 10px; | |
| border-radius: 4px; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 20px; | |
| margin-top: 30px; | |
| color: #7f8c8d; | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 768px) { | |
| .content { | |
| padding: 15px; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .flowchart-container { | |
| padding: 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Organizational Change Management Framework</h1> | |
| <p class="subtitle">A comprehensive visualization of change management concepts and their relationships</p> | |
| </header> | |
| <div class="content"> | |
| <div class="description"> | |
| <p>This flowchart illustrates the key components of organizational change management, starting from the central concept on the left and expanding to show various dimensions including fundamentals, contexts, and interventions.</p> | |
| <p>Use this diagram to understand the relationships between different aspects of organizational development and change management.</p> | |
| </div> | |
| <div class="flowchart-container"> | |
| <div class="mermaid"> | |
| flowchart LR | |
| A["Management of Change & OD"] --> B["Fundamentals"] | |
| A --> C["Organizational Contexts"] | |
| A --> D["Interventions"] | |
| %% Fundamentals branch | |
| B --> B1["Urgency for Change"] | |
| B --> B2["Theories & Models"] | |
| B2 --> B2a["Lewin's 3-Step Model"] | |
| B2 --> B2b["Kotter's 8-Step Model"] | |
| %% Organizational Contexts branch | |
| C --> C1["Entrepreneurial Firms"] | |
| C --> C2["Family Businesses"] | |
| C --> C3["Not-for-Profit Orgs"] | |
| C --> C4["Educational Institutions"] | |
| %% Entrepreneurial Firms details | |
| C1 --> C1a["Diagnostic Framework"] | |
| C1a --> C1a1["Business System"] | |
| C1a --> C1a2["Governance System"] | |
| C1a --> C1a3["Family System"] | |
| C1 --> C1b["Life Cycle Stages"] | |
| %% Family Business details | |
| C2 --> C2a["Unique Challenges"] | |
| C2 --> C2b["Succession Planning"] | |
| C2b --> C2b1["Setting Ground Rules"] | |
| C2b --> C2b2["Nurturing Successor"] | |
| C2b --> C2b3["Selection Process"] | |
| C2b --> C2b4["Transition Process"] | |
| %% NPO details | |
| C3 --> C3a["Differences from Commercial"] | |
| C3 --> C3b["OD Process Steps"] | |
| C3 --> C3c["Major Interventions"] | |
| %% Educational Institutions details | |
| C4 --> C4a["Schools"] | |
| C4 --> C4b["Higher Education"] | |
| %% Interventions branch | |
| D --> D1["Individual-Level"] | |
| D --> D2["Team-Level"] | |
| D --> D3["Organization-Level"] | |
| D3 --> D3a["Strategic Interventions"] | |
| D3 --> D3b["Technostructural"] | |
| D3 --> D3c["Culture Change"] | |
| %% Styling | |
| classDef root fill:#2c3e50,color:white,stroke:#2c3e50,stroke-width:2px | |
| classDef level1 fill:#3498db,color:white,stroke:#2980b9 | |
| classDef level2 fill:#9b59b6,color:white,stroke:#8e44ad | |
| classDef level3 fill:#e74c3c,color:white,stroke:#c0392b | |
| classDef level4 fill:#f39c12,color:white,stroke:#e67e22 | |
| class A root | |
| class B,C,D level1 | |
| class B1,B2,C1,C2,C3,C4,D1,D2,D3 level2 | |
| class B2a,B2b,C1a,C1b,C2a,C2b,C3a,C3b,C3c,C4a,C4b,D3a,D3b,D3c level3 | |
| class C1a1,C1a2,C1a3,C2b1,C2b2,C2b3,C2b4 level4 | |
| </div> | |
| </div> | |
| <div class="legend"> | |
| <h3>Flowchart Legend</h3> | |
| <div class="legend-items"> | |
| <div class="legend-item"> | |
| <div class="color-box" style="background-color: #2c3e50;"></div> | |
| <span>Root Concept</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="color-box" style="background-color: #3498db;"></div> | |
| <span>Primary Categories</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="color-box" style="background-color: #9b59b6;"></div> | |
| <span>Secondary Concepts</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="color-box" style="background-color: #e74c3c;"></div> | |
| <span>Tertiary Concepts</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="color-box" style="background-color: #f39c12;"></div> | |
| <span>Detailed Elements</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Organizational Change Management Framework | Designed for clarity and understanding</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |