다이어그램 그리기

티스토리 편집에 아래 코드를 추가하면 mermaid 가 출력된다.

<script src="https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js"> </script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
      const elements = document.querySelectorAll('code.language-mermaid');

      for (const element of elements) {
        const div = document.createElement('div');
        div.innerHTML = element.textContent;
        div.className = 'mermaid';

        const pre = element.parentElement;
        pre.style.textAlign = 'center';
        pre.removeChild(element);
        pre.appendChild(div);
      }
    });
</script>

예시 mermaid

'''mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Middleware
    participant Router
    participant Guard
    participant Interceptor
    participant Controller
    participant Service

    Client->>Server: HTTP Request
    Server->>Middleware: Execute Middleware
    Middleware->>Router: Route Request
    Router->>Guard: Execute Guards
    Guard-->>Router: Continue if allowed
    Router->>Interceptor: Execute Interceptors (Pre-processing)
    Interceptor->>Controller: Execute Controller
    Controller->>Service: Execute Service
    Service-->>Controller: Return Result
    Controller-->>Interceptor: Return Result
    Interceptor->>Interceptor: Execute Interceptors (Post-processing)
    Interceptor-->>Router: Continue
    Router-->>Middleware: Continue
    Middleware-->>Server: Continue
    Server-->>Client: HTTP Response
'''

결과

sequenceDiagram
    participant Client
    participant Server
    participant Middleware
    participant Router
    participant Guard
    participant Interceptor
    participant Controller
    participant Service

    Client->>Server: HTTP Request
    Server->>Middleware: Execute Middleware
    Middleware->>Router: Route Request
    Router->>Guard: Execute Guards
    Guard-->>Router: Continue if allowed
    Router->>Interceptor: Execute Interceptors (Pre-processing)
    Interceptor->>Controller: Execute Controller
    Controller->>Service: Execute Service
    Service-->>Controller: Return Result
    Controller-->>Interceptor: Return Result
    Interceptor->>Interceptor: Execute Interceptors (Post-processing)
    Interceptor-->>Router: Continue
    Router-->>Middleware: Continue
    Middleware-->>Server: Continue
    Server-->>Client: HTTP Response