Skip to main content
SimilarExport ZIP
100%

Narcissist vs. Empath Diagram

✓ Published3🌍 Public
CCurran Kelleher
Last edited Aug 11, 2025
Created on Aug 11, 2025

This diagram maps the stages of an empath–narcissist relationship where the narcissist stays, using a Mermaid state diagram. It visualizes paths from idealization through devaluation and control, then to boundary-setting and a stable outcome, while also showing regression, submission, and separation routes. The page loads `diagram.mermaid` via `fetch` and renders it with the Mermaid library, applying custom styling through `mermaid.initialize` and direct SVG manipulation.

AI-generated description

Empath–Narcissist Interaction Cycle (Narcissist Stays)

This Mermaid state diagram models the interaction sequence in relationships involving an empath and a narcissist, specifically focusing on the path where the narcissist stays in the relationship and adjusts to the empath's boundaries.

Stages

  1. Idealization → charm and intense validation
  2. Devaluation → criticism and coldness as novelty fades
  3. Control / Gaslighting → manipulation to retain dominance
  4. Empath Awakens → pattern recognition and clarity
  5. Set Boundaries → establishing firm, non-negotiable limits
  6. Enforce Boundaries → applying consequences when boundaries are violated
  7. Stable Relationship → ongoing respect for boundaries and healthy coexistence

Key Characteristics

  • The empath recognizes the manipulation pattern and awakens to the reality of the situation
  • The empath establishes and consistently enforces healthy boundaries
  • The narcissist chooses to remain in the relationship and adapt to these limits
  • The relationship stabilizes with the empath maintaining their integrity and the narcissist respecting the boundaries
  • Ongoing boundary maintenance prevents regression back to manipulative behaviors

Additional Features

The diagram includes:

  • Regression paths showing how manipulation might resurface, leading back to Control stage
  • Maintenance loop between Stable and Enforce Boundaries for ongoing boundary check-ins
  • Separation paths showing how an empath may still choose to exit at various stages

Run

Open index.html in a browser. The page loads diagram.mermaid and renders it with Mermaid.

MIT Licensed

Similar vizzes

Loading thumbnail…

Jungian "Empath Awakening" Diagram

This diagram models Carl Jung’s shadow integration process for empaths, tracing disowned traits through somatic recognition, differentiation, ownership, boundary-setting, and action before reaching an “Awakening” moment that deepens integration. It also maps failure loops into burnout and bypassing. Built with Mermaid.js state diagrams, the visualization renders a directed flow graph with labeled transitions and emphasizes the awakening node via custom JavaScript that queries SVG elements and applies an animated glow ring, styled with CSS animations.

CCurran Kelleher
67% match
Loading thumbnail…

Styled Mermaid Diagram

This example shows a state diagram for a data loading process, depicting transitions from Idle to Loading, and from Loading to either Succeeded or Failed states. The visualization uses Mermaid.js to render the diagram, with JavaScript code that fetches the diagram definition from a separate file and renders it as SVG. The styling is customized with the Inconsolata monospace font, and the JavaScript API waits for document fonts to load before initializing Mermaid's rendering engine.

CCurran Kelleher
59% match
Loading thumbnail…

Mermaid Starter

This visualization displays a simple flowchart using Mermaid, rendering a sequence of processes and decisions from a start node to an end node. The diagram is generated in an HTML page using Mermaid's `initialize` and `render` APIs, with an import map loading the library from a CDN. The diagram definition is stored as a string and rendered into a styled container with a grayscale theme. The example supports easy modification of the diagram syntax through the JavaScript code.

CCurran Kelleher
58% match
Loading thumbnail…

Data Loading State Diagram

This example visualizes the sequence of interactions between a user, a web page, and a server during data loading using a sequence diagram. It shows the initial page load, subsequent data requests, and how the page updates with the retrieved information. The diagram is rendered with the Mermaid.js library, which parses a markdown-like diagram definition fetched from a separate file. Custom CSS and JavaScript ensure the diagram uses the Inconsolata font and applies styling to actors, labels, and edges for clarity.

CCurran Kelleher
52% match
Loading thumbnail…

SaaS Infrastructure

This example shows a full-stack web application architecture through a flowchart diagram rendered with Mermaid.js. The diagram organizes services into four labeled layers—Client, Application, Infrastructure, and External Providers—and connects them with directional arrows indicating relationships such as HTTP requests, database queries, and token verification. The code fetches the diagram definition from a separate `diagram.mermaid` file and renders it dynamically using Mermaid's JavaScript API, applying custom styling through Inconsolata font and theme variables. The implementation relies on `fetch` to load the source and `mermaid.render` to generate the SVG output.

CCurran Kelleher
49% match
Loading thumbnail…

Fork of Emptiness

This visualization presents a meditation on emptiness and form through an interactive animated diagram. A central circle represents emptiness, surrounded by eight wedge-shaped paths that act as forms, initially displayed at reduced opacity. Hovering over the center reveals the forms, while individual forms highlight on hover; clicking a form triggers a scale-and-rotate animation that visually collapses it back toward emptiness. The piece uses React for state and dimension handling via `useDimensions` with a `ResizeObserver`, while D3 v7 manages all SVG rendering, transitions, and event handlers.

NNita
49% match
Loading thumbnail…

Zen Lineage Diagram

This example shows a lineage diagram of Zen Buddhism schools, tracing the flow from Chinese Chán through the Five Houses to Japanese, Korean, Vietnamese, and modern Western traditions. The visualization uses the Mermaid library to render a state diagram from a `diagram.mermaid` file, with the `stateDiagram-v2` syntax defining states and transitions. The HTML page fetches the Mermaid definition, renders it to SVG via `mermaid.render()`, and adjusts the SVG to be responsive. The diagram is styled with a neutral theme and the Tagesschrift font.

CCurran Kelleher
47% match
Loading thumbnail…

ego2

Two interactive force-directed graphs render the same ego network side by side, with nodes and edges laid out using the WebCola constraint-based layout library via its D3 adaptor. The visualization encodes nodes as colored circles and links as gray lines, with graph data pulled from a JSON file containing nodes, links, and group hierarchies. A button and spacebar trigger a dynamic animation that disconnects or reconnects all edges from node 0, updating both D3 SVG renderings simultaneously to compare the resulting layout changes.

Bbrett@cloudaccelerator.co
47% match