Skip to main content
SimilarExport ZIP
100%

Fork of Narcissist vs. Empath Diagram

• Draft0🔗 Unlisted
CCurran Kelleher
Last edited Jan 5, 2026
Created on Jan 5, 2026

This diagram maps a cyclical conflict pattern between an empath and a narcissist, showing how boundary requests are met with refusal and six conversation-shifting tactics that lead to debated boundaries. The Mermaid state diagram renders with Inconsolata fonts loaded via the Fonts API, and custom styling applies monospace labels, bold state text, and responsive SVG scaling through CSS overrides.

AI-generated description

Empath–Narcissist Boundary Conflict Pattern

This diagram illustrates the behavioral patterns observed in a conflict where:

  1. Empath makes clear boundary requests - Explicit, polite, repeated requests for space and disengagement
  2. Narcissist refuses/overrides boundaries - Does not honor the requests and remains present
  3. Conversation-shifting tactics deployed - Multiple techniques that redirect away from honoring the boundary:
    • Emotional Inversion: "Why are you angry?" (shifts focus to Empath's emotions)
    • Conditional Respect: "Say it nicely" (makes boundary contingent on performance)
    • Moral Framing: "You're ruining our day" (reframes request as harm)
    • Persistence After Closure: Continues returning to closed topics
    • Spatial Minimization: "I came in your face?" (dismisses experience)
    • Responsibility Reversal: "Because you're angry I must stay" (boundary becomes wrongdoing)

Key Observations

  • Boundaries are debated rather than respected
  • The interaction escalates because the boundary is not honored
  • The pattern can repeat cyclically when Empath tries again
  • Resolution typically requires Empath enforcing their own exit or capitulation

Important Notes

This diagram describes behavioral patterns, not diagnostic conclusions. It shows what happened in a specific interaction, not a clinical diagnosis of narcissism or manipulation. Patterns across time and contexts would be needed for broader conclusions.

MIT Licensed

Similar vizzes

Loading thumbnail…

Narcissist vs. Empath Diagram

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.

CCurran Kelleher
88% match
Loading thumbnail…

Fork of Narcissist vs. Empath Diagram

This state diagram traces the historical spread of Zen Buddhism from Indian Mahāyāna roots through early Chinese Chán, the Five Houses, and its transmission into Japanese Rinzai, Sōtō, Seon, and Thiền lineages, culminating in modern Western schools. Rendered with Mermaid.js, the diagram is loaded from an external `.mermaid` file via `fetch()` and drawn into the DOM using `mermaid.render()`. Nested state subgraphs organize regional details, while labeled edges indicate influences and diminishing lineages.

CCurran Kelleher
77% match
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
64% match
Loading thumbnail…

Fork of Styled Mermaid Diagram

This example shows a Mermaid.js state diagram that depicts the lifecycle of a data loading process (Idle, Loading, Succeeded, Failed) for a web application. The visualization is rendered dynamically by fetching the diagram definition from a separate `.mermaid` file and passing it to Mermaid's `render` method. The code uses Mermaid's `initialize` API to configure theme variables and spacing, and it waits for the Inconsolata font to load before rendering. After the render, the HTML is post-processed to enforce custom styling on SVG elements, including specific font sizes and black fills for state and edge labels.

CCurran Kelleher
60% match
Loading thumbnail…

Fork of Styled Mermaid Diagram

This example presents a state diagram built with Mermaid.js, visualizing a complete sales and delivery pipeline with inbound engine, entry paths, intake qualification, and multiple sales paths. It highlights feedback loops that route leads through nurturing touchpoints and qualification gates, ultimately leading to closed-won deals or blocked outcomes. The code fetches the diagram definition from `diagram.mermaid`, renders it via `mermaid.render`, and applies custom styling to ensure consistent font rendering. The visualization uses the Inconsolata font, loaded through the Font Loading API before Mermaid initializes.

CCurran Kelleher
60% match
Loading thumbnail…

Fork of Styled Mermaid Diagram

This example shows a state diagram for data loading with four states—Idle, Loading, Succeeded, and Failed—and the transitions between them. It uses Mermaid.js to parse the `stateDiagram-v2` definition and render the SVG, with custom styling applied via `styleSVGText` and `scaleSVG`. The code waits for the Inconsolata font to load using the Font Loading API before rendering, and overrides Mermaid’s default styling (text fill, font family, and label backgrounds) through CSS and JavaScript to ensure visual consistency.

CCurran Kelleher
59% 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
55% match
Loading thumbnail…

Fork of SaaS Infrastructure

This example visualizes the end-to-end product lifecycle, from ideation through post-launch, using a Mermaid flowchart. The diagram groups phases into colored subgraphs and connects tasks with directional arrows, including a feedback loop back to ideation. It is rendered in the browser via the Mermaid JavaScript library, which fetches the diagram definition from a local `.mermaid` file and converts it to SVG. Styling is applied through CSS and JavaScript, using the Inconsolata font and custom theme variables to ensure monochrome nodes, black borders, and consistent typography.

CCurran Kelleher
53% match