Interactive CISSP 8-Domain Mindmap

Build a single-file interactive mindmap covering all 8 CISSP domains.

Introduction

30 Second Summary

Studying for the CISSP means juggling eight domains worth of security knowledge. Having a visual reference that shows how concepts connect makes review sessions far more efficient than scrolling through text-heavy study guides.

In this project, you will build a single-file interactive mindmap hub that visualizes all 8 CISSP domains as expandable, zoomable diagrams you can open in any browser.

What You'll Build

A tabbed HTML page that uses the Markmap library to render nested Markdown content as interactive, collapsible mindmaps for each CISSP domain.

By the end of this project, you'll have:

  • A single cissp-mindmaps.html file that works offline after the initial CDN load.
  • 8 complete domain mindmaps following the ISC2 April 2024 exam outline structure with proper weights.
  • A tabbed navigation interface with a polished dark theme and domain-specific color coding.
  • Secret Mission: A cross-domain search feature that highlights matching nodes and navigates between tabs.

Are there any prerequisites?

None. This project uses a single HTML file with no build tools or package managers required. You just need Google Antigravity IDE (or any text editor) and a web browser.

Create the HTML File and Verify Markmap

Before building the full 8-domain mindmap interface, you need a working foundation. That means creating an HTML file, loading the Markmap library from a CDN, and confirming it can render interactive diagrams.

In this step, you will create a single HTML file, verify that Markmap renders correctly, and set up the page skeleton for the tabbed interface.

In this step, get ready to:
  • Create the cissp-mindmaps.html file and load the Markmap autoloader.
  • Verify the library renders an interactive mindmap in your browser.
  • Set up the page layout with a header, tab bar, and content area.
Create the file with a test mindmap

Markmap is a library that transforms Markdown lists into interactive, zoomable tree diagrams. You will load it from a CDN so there is nothing to install.

  • In Google Antigravity IDE, press Cmd+N (macOS) or Ctrl+N (Windows) to create a new file.
  • Save it immediately with Cmd+S (macOS) or Ctrl+S (Windows) and name it cissp-mindmaps.html. Save it to any folder you can find easily, such as your Desktop.
  • Paste the following test code into the file to verify Markmap loads correctly:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CISSP 8-Domain Mindmap Reference</title>
  <script>
    window.markmap = {
      autoLoader: {
        manual: true
      }
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</head>
<body>
  <!-- Test container to verify markmap renders -->
  <div class="markmap">
    <script type="text/template">
- CISSP Test
  - Domain 1
  - Domain 2
    - Subtopic A
    - Subtopic B
    </script>
  </div>
  <script>
    // Trigger rendering manually since manual mode is enabled
    markmap.autoLoader.ready.then(() => {
      markmap.autoLoader.renderAllUnder(document.body);
    });
  </script>
</body>
</html>

What does this code do?

The window.markmap config object sets manual: true so Markmap does not auto-render on page load. This gives you control over when each mindmap appears, which you will need for the tabbed interface later.

The <div class="markmap"> container holds a <script type="text/template"> with nested Markdown. Markmap converts those indented lines into an interactive tree.

The final script waits for the autoloader to be ready, then calls renderAllUnder(document.body) to render all .markmap elements on the page.

Verify rendering works
  • Save cissp-mindmaps.html.
  • Open the file in your browser by double-clicking it in Finder (macOS) or File Explorer (Windows), or by right-clicking the file in the IDE's Explorer panel and selecting Reveal in Finder / Reveal in File Explorer.
  • You should see an interactive mindmap with "CISSP Test" as the root node and two branches. Try clicking a node to collapse or expand it.

Seeing raw text instead of a diagram?

Open DevTools with F12 and check the Console tab. If you see network errors, the CDN script failed to load. Make sure you have an internet connection and that the src URL is exactly https://cdn.jsdelivr.net/npm/markmap-autoloader@latest.

If the page is completely blank, check that your file is saved with the .html extension and that you opened it in a browser, not in the IDE's preview.

Help me debug why my markmap test is not rendering.

Set up the page layout structure

Now that you know Markmap works, you can replace the test content with the real page skeleton. This structure includes a header, a tab bar for switching between domains, and a content area where mindmaps will appear.

  • Select all the code in cissp-mindmaps.html with Cmd+A (macOS) or Ctrl+A (Windows) and replace it with the following:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CISSP 8-Domain Mindmap Reference</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkSansSerif, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a2e;
      color: #e0e0e0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    header {
      padding: 16px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #e94560;
    }

    header .subtitle {
      font-size: 0.8rem;
      color: #888;
      margin-top: 2px;
    }

    .tab-bar {
      display: flex;
      gap: 4px;
      padding: 8px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      overflow-x: auto;
      flex-shrink: 0;
    }

    .content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
  </style>
  <script>
    window.markmap = {
      autoLoader: {
        manual: true,
        toolbar: true
      }
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</head>
<body>
  <header>
    <div>
      <h1>CISSP 8-Domain Mindmap Reference</h1>
      <div class="subtitle">ISC2 Exam Outline - Effective April 15, 2024</div>
    </div>
  </header>
  <div class="tab-bar"></div>
  <div class="content"></div>
</body>
</html>

What does this code do?

The <style> block sets up a dark theme with a full-viewport flex layout. The page will never scroll vertically because the mindmap container fills all remaining height.

The header holds the project title and a subtitle showing the exam outline date. The .tab-bar is where domain tabs will go in the next step. The .content div is where individual domain mindmaps will be rendered.

The config now includes toolbar: true which adds a small toolbar (zoom in, zoom out, fit) to each rendered mindmap.

  • Save cissp-mindmaps.html.
  • Refresh your browser. You should see a dark page with a red "CISSP 8-Domain Mindmap Reference" heading and a grey subtitle reading "ISC2 Exam Outline - Effective April 15, 2024" below it.
  • Open DevTools with F12 and confirm there are no errors in the Console tab.

Page is still showing the test mindmap?

Make sure you selected all the old code before pasting. Press Cmd+A (macOS) or Ctrl+A (Windows) to select everything, then paste the new code. Save and refresh.

If the page appears completely white, check that the <style> block is inside <head> and that background: #1a1a2e is on the body rule.

Help me fix my page layout.

✔️ Awesome, I've got everything!

Great. Double check your file is saved before moving on.

ⓧ I'd like to double check the full code

Here is the complete cissp-mindmaps.html file at this point:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CISSP 8-Domain Mindmap Reference</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkSansSerif, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a2e;
      color: #e0e0e0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    header {
      padding: 16px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #e94560;
    }

    header .subtitle {
      font-size: 0.8rem;
      color: #888;
      margin-top: 2px;
    }

    .tab-bar {
      display: flex;
      gap: 4px;
      padding: 8px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      overflow-x: auto;
      flex-shrink: 0;
    }

    .content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
  </style>
  <script>
    window.markmap = {
      autoLoader: {
        manual: true,
        toolbar: true
      }
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</head>
<body>
  <header>
    <div>
      <h1>CISSP 8-Domain Mindmap Reference</h1>
      <div class="subtitle">ISC2 Exam Outline - Effective April 15, 2024</div>
    </div>
  </header>
  <div class="tab-bar"></div>
  <div class="content"></div>
</body>
</html>

Your page skeleton is ready. Next up, you will add the 8 domain tabs and wire up the switching logic so each tab reveals its own mindmap.

Build the Tab Navigation and Domain Containers

Your header is in place and the page renders without errors. Now you need a way for users to switch between the 8 CISSP domains.

In this step, you will build a tabbed navigation bar and create empty containers for each domain's mindmap. The tabs will show domain names and exam weight percentages, and clicking a tab will reveal its container while hiding the others.

In this step, get ready to:
  • Create 8 styled tab buttons with domain names and weights.
  • Add 8 hidden domain containers ready to hold mindmap content.
  • Wire up JavaScript to switch between tabs and trigger rendering.
Create the tab bar

Each tab needs to show a domain number, a short name, and the exam weight percentage from the ISC2 April 2024 outline. The first tab (Domain 1) will be active by default.

  • In cissp-mindmaps.html, find the .content CSS rule inside your <style> block and add these tab styles below it:
/* Tab button base styles */
.tab {
  padding: 8px 14px;
  border: 1px solid #0f3460;
  border-radius: 6px 6px 0 0;
  background: #1a1a2e;
  color: #aaa;
  cursor: pointer;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

/* Hover state lightens the tab */
.tab:hover {
  background: #0f3460;
  color: #fff;
}

/* Active tab gets a red bottom border */
.tab.active {
  background: #0f3460;
  color: #fff;
  border-bottom: 2px solid #e94560;
}

/* Exam weight percentage badge */
.tab .weight {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.7rem;
  color: #e94560;
  font-weight: 700;
}

What do these styles do?

The .tab base style gives each button a dark rounded-top shape with a transparent bottom border. When a tab is active, the bottom border turns red (#e94560) to indicate selection.

The .weight span highlights each domain's exam percentage in red so learners can quickly see how heavily weighted each area is.

You won't see any change yet because the tab bar is still empty. The next code block adds the HTML buttons that use these styles.

  • Find the empty <div class="tab-bar"></div> in the <body> section and replace it with this tab bar containing 8 domain buttons:
<div class="tab-bar">
  <div class="tab active" data-domain="1">D1: Security &amp; Risk Mgmt<span class="weight">16%</span></div>
  <div class="tab" data-domain="2">D2: Asset Security<span class="weight">10%</span></div>
  <div class="tab" data-domain="3">D3: Security Arch &amp; Eng<span class="weight">13%</span></div>
  <div class="tab" data-domain="4">D4: Communication &amp; Network<span class="weight">13%</span></div>
  <div class="tab" data-domain="5">D5: IAM<span class="weight">13%</span></div>
  <div class="tab" data-domain="6">D6: Assessment &amp; Testing<span class="weight">12%</span></div>
  <div class="tab" data-domain="7">D7: Security Operations<span class="weight">13%</span></div>
  <div class="tab" data-domain="8">D8: Software Dev Security<span class="weight">10%</span></div>
</div>

What does this HTML do?

Each div.tab carries a data-domain attribute with its domain number (1-8). The JavaScript you add later reads this attribute to know which container to show.

The first tab has class active so Domain 1 is highlighted on page load. The &amp; in the tab text is the HTML entity for the ampersand character.

  • Save cissp-mindmaps.html and refresh your browser.
  • You should see 8 dark tab buttons below the header, each showing a domain name and a red percentage badge. The first tab (D1) should appear highlighted with a red bottom border.

Tabs not showing up?

Make sure the new tab divs are inside the <div class="tab-bar"> wrapper, not outside it. If you accidentally deleted the wrapper, re-add it around the 8 tab divs.

Check that your CSS includes the .tab rule. Without it, the tabs have no padding or border and may appear as plain text.

Why aren't my CISSP domain tabs appearing?

Add 8 markmap containers

Each domain needs its own container that holds a Markmap element. Only the active domain's container should be visible. The rest stay hidden until their tab is clicked.

  • Add the container and markmap styles by pasting this CSS below the .tab .weight rule in your <style> block:
/* Full-screen positioning for domain panels */
.domain-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Only the active container is visible */
.domain-container.active {
  display: block;
}

/* Markmap fills its parent container */
.markmap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* SVG rendered by markmap stretches to fill */
.markmap > svg {
  width: 100%;
  height: 100%;
}

What do these styles do?

Each .domain-container is positioned absolutely so all 8 stack on top of each other in the same space. Only the one with class active is visible at any time.

The .markmap and .markmap > svg rules ensure the rendered SVG mindmap fills the entire available viewport height below the tab bar.

  • Now find the empty <div class="content"></div> in the <body> and replace it with these 8 domain containers:
<div class="content">
  <!-- Domain 1 -->
  <div class="domain-container active" id="domain-1">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 2 -->
  <div class="domain-container" id="domain-2">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 3 -->
  <div class="domain-container" id="domain-3">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 4 -->
  <div class="domain-container" id="domain-4">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 5 -->
  <div class="domain-container" id="domain-5">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 6 -->
  <div class="domain-container" id="domain-6">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 7 -->
  <div class="domain-container" id="domain-7">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
  <!-- Domain 8 -->
  <div class="domain-container" id="domain-8">
    <div class="markmap"><script type="text/template"></script></div>
  </div>
</div>

What does this structure do?

Each domain-container has a unique id like domain-1 through domain-8. The JavaScript will use these IDs to find and show the right container when a tab is clicked.

Inside each container, the <script type="text/template"> tag is where Markmap looks for Markdown content to render. These are empty for now. You will fill them in the next step.

  • Save cissp-mindmaps.html and refresh your browser.
  • Open DevTools (press Cmd+Option+I on macOS or Ctrl+Shift+I on Windows) and expand the .content div in the Elements panel. You should see 8 domain-container divs listed there.

Don't see the containers in DevTools?

Make sure each domain-container div is inside the <div class="content"> wrapper. If they are siblings of .content instead of children, the absolute positioning will not work correctly.

Check that the first container has both the domain-container class and the active class. Without active, all containers will be hidden.

My domain containers don't appear in the DOM correctly. Can you help?

Wire up tab switching logic

The tabs are visible and the containers exist, but clicking a tab does nothing yet. You need JavaScript that listens for clicks, swaps the active state, and tells Markmap to render the newly visible container.

  • Add this <script> block just before the closing </body> tag:
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.tab');
    const containers = document.querySelectorAll('.domain-container');
    // Track which domains have been rendered to avoid re-rendering
    const rendered = new Set();

    function switchDomain(domainNum) {
      // Remove active state from all tabs and containers
      tabs.forEach(t => t.classList.remove('active'));
      containers.forEach(c => c.classList.remove('active'));

      // Activate the selected tab and its container
      const activeTab = document.querySelector(`.tab[data-domain="${domainNum}"]`);
      const activeContainer = document.getElementById(`domain-${domainNum}`);
      activeTab.classList.add('active');
      activeContainer.classList.add('active');

      // Render the markmap only on first view
      if (!rendered.has(domainNum)) {
        markmap.autoLoader.renderAllUnder(activeContainer).then(() => {
          rendered.add(domainNum);
        });
      }
    }

    // Attach click handlers to every tab
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        switchDomain(tab.getAttribute('data-domain'));
      });
    });

    // Wait for markmap library to load, then render Domain 1
    markmap.autoLoader.ready.then(() => {
      switchDomain('1');
    });
  });
</script>

What does this script do?

  • switchDomain(domainNum) removes the active class from all tabs and containers, then adds it to the selected ones. This hides the old domain and shows the new one.
  • The rendered Set tracks which domains have already been rendered. This prevents Markmap from re-processing the same content on every tab click.
  • markmap.autoLoader.renderAllUnder(activeContainer) tells Markmap to find any .markmap elements inside that container and render them as interactive SVG mindmaps.
  • markmap.autoLoader.ready is a Promise that resolves when the autoloader library finishes loading. The initial render waits for this to avoid calling Markmap before it exists.
  • Save cissp-mindmaps.html and refresh your browser.
  • Click each of the 8 tabs. The clicked tab should highlight with a red bottom border and the previously active tab should return to its dim state.
  • Open the browser console (in DevTools, click the Console tab). Confirm there are no JavaScript errors.

Tabs not switching when clicked?

Check the console for errors. If you see something about markmap being undefined, the CDN script may not have loaded. Make sure the window.markmap config block comes before the autoloader script in <head>.

If clicking a tab does nothing at all, verify that your <script> block is placed before </body> (not inside <head> and not inside one of the domain containers).

My tab switching isn't working. Help me debug.

✔️ Awesome, I've got everything!

Great. Double check you have saved your file before moving on.

ⓧ I'd like to double check the full code

Here is the complete cissp-mindmaps.html file at this point. Compare yours against it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CISSP 8-Domain Mindmap Reference</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkSansSerif, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a2e;
      color: #e0e0e0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    header {
      padding: 16px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    header h1 { font-size: 1.3rem; font-weight: 600; color: #e94560; }
    header .subtitle { font-size: 0.8rem; color: #888; margin-top: 2px; }
    .tab-bar {
      display: flex; gap: 4px; padding: 8px 24px;
      background: #16213e; border-bottom: 1px solid #0f3460;
      overflow-x: auto; flex-shrink: 0;
    }
    .tab {
      padding: 8px 14px; border: 1px solid #0f3460;
      border-radius: 6px 6px 0 0; background: #1a1a2e; color: #aaa;
      cursor: pointer; font-size: 0.78rem; white-space: nowrap;
      transition: all 0.2s; border-bottom: 2px solid transparent;
    }
    .tab:hover { background: #0f3460; color: #fff; }
    .tab.active { background: #0f3460; color: #fff; border-bottom: 2px solid #e94560; }
    .tab .weight { display: inline-block; margin-left: 6px; font-size: 0.7rem; color: #e94560; font-weight: 700; }
    .content { flex: 1; position: relative; overflow: hidden; }
    .domain-container { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
    .domain-container.active { display: block; }
    .markmap { position: relative; width: 100%; height: 100%; }
    .markmap > svg { width: 100%; height: 100%; }
  </style>
  <script>
    window.markmap = { autoLoader: { manual: true, toolbar: true } };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</head>
<body>
  <header>
    <div>
      <h1>CISSP 8-Domain Mindmap Reference</h1>
      <div class="subtitle">ISC2 Exam Outline - Effective April 15, 2024</div>
    </div>
  </header>
  <div class="tab-bar">
    <div class="tab active" data-domain="1">D1: Security &amp; Risk Mgmt<span class="weight">16%</span></div>
    <div class="tab" data-domain="2">D2: Asset Security<span class="weight">10%</span></div>
    <div class="tab" data-domain="3">D3: Security Arch &amp; Eng<span class="weight">13%</span></div>
    <div class="tab" data-domain="4">D4: Communication &amp; Network<span class="weight">13%</span></div>
    <div class="tab" data-domain="5">D5: IAM<span class="weight">13%</span></div>
    <div class="tab" data-domain="6">D6: Assessment &amp; Testing<span class="weight">12%</span></div>
    <div class="tab" data-domain="7">D7: Security Operations<span class="weight">13%</span></div>
    <div class="tab" data-domain="8">D8: Software Dev Security<span class="weight">10%</span></div>
  </div>
  <div class="content">
    <div class="domain-container active" id="domain-1"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-2"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-3"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-4"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-5"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-6"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-7"><div class="markmap"><script type="text/template"></script></div></div>
    <div class="domain-container" id="domain-8"><div class="markmap"><script type="text/template"></script></div></div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabs = document.querySelectorAll('.tab');
      const containers = document.querySelectorAll('.domain-container');
      const rendered = new Set();
      function switchDomain(domainNum) {
        tabs.forEach(t => t.classList.remove('active'));
        containers.forEach(c => c.classList.remove('active'));
        const activeTab = document.querySelector(`.tab[data-domain="${domainNum}"]`);
        const activeContainer = document.getElementById(`domain-${domainNum}`);
        activeTab.classList.add('active');
        activeContainer.classList.add('active');
        if (!rendered.has(domainNum)) {
          markmap.autoLoader.renderAllUnder(activeContainer).then(() => { rendered.add(domainNum); });
        }
      }
      tabs.forEach(tab => {
        tab.addEventListener('click', () => { switchDomain(tab.getAttribute('data-domain')); });
      });
      markmap.autoLoader.ready.then(() => { switchDomain('1'); });
    });
  </script>
</body>
</html>

Your tabbed navigation is working. Each tab highlights on click and shows its (currently empty) container. Next up, you will fill those containers with the actual CISSP domain content as nested Markdown mindmaps.

Add All 8 Domain Mindmaps

Your tabbed interface is wired up and switching between empty containers. Now it is time to fill those containers with the actual CISSP domain content.

Each domain gets its content written in nested Markdown format. Markmap reads this Markdown and converts indentation levels into expandable tree branches. You will also add YAML frontmatter at the top of each template to control colors and the initial expansion depth.

In this step, get ready to:
  • Populate Domains 1-4 with their full CISSP topic hierarchies.
  • Populate Domains 5-8 with their full CISSP topic hierarchies.
  • Verify all 8 mindmaps render interactively when you click each tab.
Add Domains 1-4 content

Each domain template uses nested Markdown lists to define the topic hierarchy. Indentation creates parent-child relationships between nodes. The YAML frontmatter block at the top tells Markmap which color to use for branches and how many levels to expand on first load.

  • In cissp-mindmaps.html, find the empty <script type="text/template"></script> tag inside the domain-1 container.
  • Replace that empty tag with the following content (including the opening and closing script tags):
<script type="text/template">
---
markmap:
  color:
    - "#e94560"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 1: Security and Risk Management (16%)**
  - 1.1 Professional Ethics
    - ISC2 Code of Professional Ethics
    - Organizational code of ethics
  - 1.2 Security Concepts
    - Confidentiality
    - Integrity
    - Availability
    - Authenticity
    - Nonrepudiation
  - 1.3 Security Governance
    - Alignment with business strategy
    - Organizational roles and responsibilities
    - Security control frameworks
      - ISO 27001
      - NIST CSF
      - COBIT
      - SABSA
      - PCI DSS
      - FedRAMP
    - Due care and due diligence
  - 1.4 Legal, Regulatory, Compliance
    - Cybercrimes and data breaches
    - Licensing and IP
      - Patents, trademarks, copyrights
      - Trade secrets
    - Import/export controls
    - Transborder data flow
    - Privacy
      - GDPR
      - CCPA
      - PIPL
  - 1.5 Security Policies
    - Standards, procedures, guidelines
    - Baselines
  - 1.6 Business Continuity
    - BIA (Business Impact Analysis)
    - External dependencies
    - Assessment and implementation
  - 1.7 Personnel Security
    - Employment agreements
    - Onboarding and termination
    - Vendor/consultant controls
  - 1.8 Risk Management
    - Risk identification
    - Risk analysis (qualitative and quantitative)
    - Risk response/treatment
      - Avoid, mitigate, transfer, accept
    - Continuous monitoring and measurement
    - Risk frameworks (ISO 31000, NIST RMF)
    - Supply chain risk (SLAs, SBOM)
    - Reporting
  - 1.9 Threat Modeling
    - STRIDE
    - PASTA
    - Attack trees
  - 1.10 Security Awareness and Training
    - Social engineering awareness
    - Phishing campaigns
    - Security champions
    - Gamification
  - 1.11 Emerging Technologies
    - AI and machine learning
    - Blockchain
    - Cryptocurrency
    </script>

How does this Markdown become a mindmap?

The YAML frontmatter (between the --- markers) configures Markmap for this domain. color sets the branch color, colorFreezeLevel: 2 locks the color at the second branch level, and initialExpandLevel: 2 expands two levels of nodes on first render.

The Markdown list below uses indentation to create hierarchy. Each - item becomes a node. Deeper indentation creates child branches. Markmap automatically handles the layout, spacing, and animations.

  • Now find the empty <script type="text/template"></script> tags inside the domain-2, domain-3, and domain-4 containers.
  • Replace each empty tag with the following content for its respective domain:
<script type="text/template">
---
markmap:
  color:
    - "#f5a623"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 2: Asset Security (10%)**
  - 2.1 Asset Classification
  - 2.2 Data States
  - 2.3 Data Lifecycle
  - 2.4 Data Security Controls
  - 2.5 Data Roles and Responsibilities
  - 2.6 Data Privacy
  - 2.7 Asset Handling
    </script>
<script type="text/template">
---
markmap:
  color:
    - "#7ed321"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 3: Security Architecture and Engineering (13%)**
  - 3.1 Secure Design Principles
  - 3.2 Security Models
  - 3.3 Evaluation Criteria
  - 3.4 System Security Architecture
  - 3.5 Cryptography
  - 3.6 Cryptanalysis
  - 3.7 Physical Security
  - 3.8 Cloud Security
  - 3.9 Information System Lifecycle
    </script>
<script type="text/template">
---
markmap:
  color:
    - "#4a90d9"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 4: Communication and Network Security (13%)**
  - 4.1 Network Architecture
  - 4.2 Secure Protocols
  - 4.3 Network Components
  - 4.4 Segmentation
  - 4.5 Wireless Security
  - 4.6 Remote Access
  - 4.7 Secure Communication Channels
    </script>

Why does each domain have a different color?

The color value in each domain's frontmatter assigns a unique hue. This makes it immediately obvious which domain you are viewing when switching between tabs. Domain 1 is red (#e94560), Domain 2 is orange (#f5a623), Domain 3 is green (#7ed321), and Domain 4 is blue (#4a90d9).

  • Save cissp-mindmaps.html.
  • Refresh your browser. Click the D1 tab. You should see a full interactive mindmap with branches for sections 1.1 through 1.11.
  • Click the D2, D3, and D4 tabs. Each should show its domain's section headings in orange, green, and blue respectively.

Seeing raw text instead of a mindmap?

Check that your YAML frontmatter starts with exactly --- on its own line and ends with --- on its own line. A missing dash or extra space breaks the parser.

Also confirm that the Markdown list uses consistent 2-space indentation for child items. Tabs or inconsistent spacing will flatten the hierarchy.

help me debug why my markmap template is showing raw text instead of a rendered diagram

Add Domains 5-8 content
  • Find the empty <script type="text/template"></script> tags inside the domain-5, domain-6, domain-7, and domain-8 containers.
  • Replace each empty tag with the following content for its respective domain:
<script type="text/template">
---
markmap:
  color:
    - "#9b59b6"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 5: Identity and Access Management (13%)**
  - 5.1 Identification and Authentication
  - 5.2 Access Control Models
  - 5.3 Identity Management Lifecycle
  - 5.4 Federation and SSO
  - 5.5 Privileged Access Management (PAM)
  - 5.6 Identity as a Service (IDaaS)
  - 5.7 Access Control Attacks
    </script>
<script type="text/template">
---
markmap:
  color:
    - "#1abc9c"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 6: Security Assessment and Testing (12%)**
  - 6.1 Assessment Strategies
  - 6.2 Vulnerability Assessment
  - 6.3 Penetration Testing
  - 6.4 Security Control Testing
  - 6.5 Log Review and Analysis
  - 6.6 Security Metrics and KPIs
  - 6.7 Reporting and Remediation
    </script>
<script type="text/template">
---
markmap:
  color:
    - "#e67e22"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 7: Security Operations (13%)**
  - 7.1 Investigations
  - 7.2 Incident Response
  - 7.3 Logging and Monitoring
  - 7.4 Resource Protection
  - 7.5 Patch and Change Management
  - 7.6 Recovery Strategies
  - 7.7 Business Continuity
  - 7.8 Physical Security Operations
    </script>
<script type="text/template">
---
markmap:
  color:
    - "#3498db"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 8: Software Development Security (10%)**
  - 8.1 Secure SDLC
  - 8.2 Security Controls in Development
  - 8.3 Software Security Effectiveness
  - 8.4 Acquired Software Security
  - 8.5 Secure Coding
  - 8.6 Database Security
  - 8.7 Threat Modeling
    </script>

What do these domain colors mean?

Domain 5 is purple (#9b59b6), Domain 6 is teal (#1abc9c), Domain 7 is orange (#e67e22), and Domain 8 is bright blue (#3498db). Together with Domains 1-4, all 8 domains have distinct colors so you can identify them at a glance.

  • Save cissp-mindmaps.html.
  • Refresh your browser and click through D5, D6, D7, and D8 tabs. Each should render a mindmap in its designated color.

A tab shows nothing when clicked?

Open DevTools (F12) and check the console for errors. A common cause is a mismatched id on the container. The switchDomain function targets domain-5 through domain-8, so confirm your container IDs match exactly.

help me figure out why one of my domain tabs renders blank

Verify all 8 domains render correctly

The switchDomain function you added in the previous step already calls renderAllUnder() each time you switch tabs. With all 8 templates populated, every tab should now produce a rendered mindmap.

  • Click through all 8 tabs in sequence. Each should show a colored mindmap with expandable branches.
  • Click any node in Domain 1's mindmap to collapse or expand its children.
  • Scroll to zoom in and out. Drag to pan around the mindmap.

Why does Domain 1 have more detail than the others?

Domain 1 (Security and Risk Management) carries the highest exam weight at 16% and covers the broadest range of subtopics. The deeper nesting gives you more branches to click through. In the next step, you will add the same level of subtopic detail to all remaining domains.

✔️ Awesome, I've got everything!

Great. Double check you have saved your file before moving on.

ⓧ I'd like to double check the full code

Here is the full cissp-mindmaps.html file as it should look at the end of this step:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CISSP 8-Domain Mindmap Reference</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkSansSerif, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a2e; color: #e0e0e0; height: 100vh;
      display: flex; flex-direction: column; overflow: hidden;
    }
    header { padding: 16px 24px; background: #16213e; border-bottom: 1px solid #0f3460; display: flex; align-items: center; justify-content: space-between; }
    header h1 { font-size: 1.3rem; font-weight: 600; color: #e94560; }
    header .subtitle { font-size: 0.8rem; color: #888; margin-top: 2px; }
    .tab-bar { display: flex; gap: 4px; padding: 8px 24px; background: #16213e; border-bottom: 1px solid #0f3460; overflow-x: auto; flex-shrink: 0; }
    .tab { padding: 8px 14px; border: 1px solid #0f3460; border-radius: 6px 6px 0 0; background: #1a1a2e; color: #aaa; cursor: pointer; font-size: 0.78rem; white-space: nowrap; transition: all 0.2s; border-bottom: 2px solid transparent; }
    .tab:hover { background: #0f3460; color: #fff; }
    .tab.active { background: #0f3460; color: #fff; border-bottom: 2px solid #e94560; }
    .tab .weight { display: inline-block; margin-left: 6px; font-size: 0.7rem; color: #e94560; font-weight: 700; }
    .content { flex: 1; position: relative; overflow: hidden; }
    .domain-container { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
    .domain-container.active { display: block; }
    .markmap { position: relative; width: 100%; height: 100%; }
    .markmap > svg { width: 100%; height: 100%; }
  </style>
  <script>window.markmap = { autoLoader: { manual: true, toolbar: true } };</script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</head>
<body>
  <header><div><h1>CISSP 8-Domain Mindmap Reference</h1><div class="subtitle">ISC2 Exam Outline - Effective April 15, 2024</div></div></header>
  <div class="tab-bar">
    <div class="tab active" data-domain="1">D1: Security &amp; Risk Mgmt<span class="weight">16%</span></div>
    <div class="tab" data-domain="2">D2: Asset Security<span class="weight">10%</span></div>
    <div class="tab" data-domain="3">D3: Security Arch &amp; Eng<span class="weight">13%</span></div>
    <div class="tab" data-domain="4">D4: Communication &amp; Network<span class="weight">13%</span></div>
    <div class="tab" data-domain="5">D5: IAM<span class="weight">13%</span></div>
    <div class="tab" data-domain="6">D6: Assessment &amp; Testing<span class="weight">12%</span></div>
    <div class="tab" data-domain="7">D7: Security Operations<span class="weight">13%</span></div>
    <div class="tab" data-domain="8">D8: Software Dev Security<span class="weight">10%</span></div>
  </div>
  <div class="content">
    <div class="domain-container active" id="domain-1"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#e94560"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 1: Security and Risk Management (16%)**
  - 1.1 Professional Ethics
    - ISC2 Code of Professional Ethics
    - Organizational code of ethics
  - 1.2 Security Concepts
    - Confidentiality
    - Integrity
    - Availability
    - Authenticity
    - Nonrepudiation
  - 1.3 Security Governance
    - Alignment with business strategy
    - Organizational roles and responsibilities
    - Security control frameworks
      - ISO 27001
      - NIST CSF
      - COBIT
      - SABSA
      - PCI DSS
      - FedRAMP
    - Due care and due diligence
  - 1.4 Legal, Regulatory, Compliance
    - Cybercrimes and data breaches
    - Licensing and IP
      - Patents, trademarks, copyrights
      - Trade secrets
    - Import/export controls
    - Transborder data flow
    - Privacy
      - GDPR
      - CCPA
      - PIPL
  - 1.5 Security Policies
    - Standards, procedures, guidelines
    - Baselines
  - 1.6 Business Continuity
    - BIA (Business Impact Analysis)
    - External dependencies
    - Assessment and implementation
  - 1.7 Personnel Security
    - Employment agreements
    - Onboarding and termination
    - Vendor/consultant controls
  - 1.8 Risk Management
    - Risk identification
    - Risk analysis (qualitative and quantitative)
    - Risk response/treatment
      - Avoid, mitigate, transfer, accept
    - Continuous monitoring and measurement
    - Risk frameworks (ISO 31000, NIST RMF)
    - Supply chain risk (SLAs, SBOM)
    - Reporting
  - 1.9 Threat Modeling
    - STRIDE
    - PASTA
    - Attack trees
  - 1.10 Security Awareness and Training
    - Social engineering awareness
    - Phishing campaigns
    - Security champions
    - Gamification
  - 1.11 Emerging Technologies
    - AI and machine learning
    - Blockchain
    - Cryptocurrency
    </script></div></div>
    <div class="domain-container" id="domain-2"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#f5a623"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 2: Asset Security (10%)**
  - 2.1 Asset Classification
  - 2.2 Data States
  - 2.3 Data Lifecycle
  - 2.4 Data Security Controls
  - 2.5 Data Roles and Responsibilities
  - 2.6 Data Privacy
  - 2.7 Asset Handling
    </script></div></div>
    <div class="domain-container" id="domain-3"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#7ed321"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 3: Security Architecture and Engineering (13%)**
  - 3.1 Secure Design Principles
  - 3.2 Security Models
  - 3.3 Evaluation Criteria
  - 3.4 System Security Architecture
  - 3.5 Cryptography
  - 3.6 Cryptanalysis
  - 3.7 Physical Security
  - 3.8 Cloud Security
  - 3.9 Information System Lifecycle
    </script></div></div>
    <div class="domain-container" id="domain-4"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#4a90d9"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 4: Communication and Network Security (13%)**
  - 4.1 Network Architecture
  - 4.2 Secure Protocols
  - 4.3 Network Components
  - 4.4 Segmentation
  - 4.5 Wireless Security
  - 4.6 Remote Access
  - 4.7 Secure Communication Channels
    </script></div></div>
    <div class="domain-container" id="domain-5"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#9b59b6"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 5: Identity and Access Management (13%)**
  - 5.1 Identification and Authentication
  - 5.2 Access Control Models
  - 5.3 Identity Management Lifecycle
  - 5.4 Federation and SSO
  - 5.5 Privileged Access Management (PAM)
  - 5.6 Identity as a Service (IDaaS)
  - 5.7 Access Control Attacks
    </script></div></div>
    <div class="domain-container" id="domain-6"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#1abc9c"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 6: Security Assessment and Testing (12%)**
  - 6.1 Assessment Strategies
  - 6.2 Vulnerability Assessment
  - 6.3 Penetration Testing
  - 6.4 Security Control Testing
  - 6.5 Log Review and Analysis
  - 6.6 Security Metrics and KPIs
  - 6.7 Reporting and Remediation
    </script></div></div>
    <div class="domain-container" id="domain-7"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#e67e22"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 7: Security Operations (13%)**
  - 7.1 Investigations
  - 7.2 Incident Response
  - 7.3 Logging and Monitoring
  - 7.4 Resource Protection
  - 7.5 Patch and Change Management
  - 7.6 Recovery Strategies
  - 7.7 Business Continuity
  - 7.8 Physical Security Operations
    </script></div></div>
    <div class="domain-container" id="domain-8"><div class="markmap"><script type="text/template">
---
markmap:
  color:
    - "#3498db"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 8: Software Development Security (10%)**
  - 8.1 Secure SDLC
  - 8.2 Security Controls in Development
  - 8.3 Software Security Effectiveness
  - 8.4 Acquired Software Security
  - 8.5 Secure Coding
  - 8.6 Database Security
  - 8.7 Threat Modeling
    </script></div></div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabs = document.querySelectorAll('.tab');
      const containers = document.querySelectorAll('.domain-container');
      const rendered = new Set();
      function switchDomain(domainNum) {
        tabs.forEach(t => t.classList.remove('active'));
        containers.forEach(c => c.classList.remove('active'));
        const activeTab = document.querySelector(`.tab[data-domain="${domainNum}"]`);
        const activeContainer = document.getElementById(`domain-${domainNum}`);
        activeTab.classList.add('active');
        activeContainer.classList.add('active');
        if (!rendered.has(domainNum)) {
          markmap.autoLoader.renderAllUnder(activeContainer).then(() => { rendered.add(domainNum); });
        }
      }
      tabs.forEach(tab => { tab.addEventListener('click', () => { switchDomain(tab.getAttribute('data-domain')); }); });
      markmap.autoLoader.ready.then(() => { switchDomain('1'); });
    });
  </script>
</body>
</html>

All 8 CISSP domains now render as interactive mindmaps. Next up, you will add visual polish with a dark theme, responsive sizing, and a footer with usage hints.

Style and Polish

Your mindmaps are rendering and the tab navigation works. The page has a solid dark foundation, but it needs a few final touches to feel like a polished reference tool.

In this step, you'll add a helpful footer with usage instructions, expand each domain's branch content to full detail, and verify everything looks great at different window sizes.

In this step, get ready to:
  • Add a footer with interaction hints and the exam outline date.
  • Expand all 8 domains with full nested subtopic content.
  • Verify the page is responsive and visually polished.
Add the footer CSS and HTML

A footer gives the learner context on what exam outline this maps to and reminds them how to interact with the mindmaps.

  • In cissp-mindmaps.html, find the closing </style> tag. Add this footer rule just before it:
    footer {
      padding: 8px 24px;
      background: #16213e;
      border-top: 1px solid #0f3460;
      font-size: 0.72rem;
      color: #666;
      display: flex;
      justify-content: space-between;
      flex-shrink: 0;
    }

What does this CSS do?

The footer matches the header's dark background and uses justify-content: space-between to push the left text and right text to opposite edges.

The flex-shrink: 0 rule prevents the footer from collapsing when the mindmap fills the viewport.

  • Now add the footer HTML. Find the closing </div> tag for the .content div (after all the domain containers). Add this footer element directly below it:
  <footer>
    <span>Based on ISC2 CISSP Exam Outline - Effective April 15, 2024</span>
    <span>Scroll to zoom | Drag to pan | Click nodes to expand/collapse</span>
  </footer>

What does this footer show?

The left span references the ISC2 April 2024 exam outline so you always know which version this maps to. The right span reminds you of the interaction controls for the mindmaps.

  • Save cissp-mindmaps.html and refresh your browser.
  • You should see a thin footer bar at the bottom of the page with the exam outline date on the left and interaction hints on the right.

Footer not visible?

Make sure the <footer> element is placed between the closing </div> of the .content div and the opening <script> tag at the bottom. If it's inside the .content div, it will be hidden by overflow: hidden.

help me figure out why my footer isn't showing up

Expand the domain branch content

Each domain's color is already set via YAML frontmatter. For those colors to create a rich visual, the branches need full nested subtopic content under each section heading.

  • In cissp-mindmaps.html, find the Domain 2 template inside id="domain-2". Replace its <script type="text/template"> content with the full nested version below:
---
markmap:
  color:
    - "#f5a623"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 2: Asset Security (10%)**
  - 2.1 Asset Classification
    - Information classification levels
      - Public, Internal, Confidential, Restricted
    - Asset inventory and ownership
    - Data owner, steward, custodian
  - 2.2 Data States
    - Data at rest
      - Encryption, access controls
    - Data in transit
      - VPNs, TLS/SSL
    - Data in use
      - Memory protection, secure enclaves
  - 2.3 Data Lifecycle
    - Create, store, use, share, archive, destroy
    - Data retention policies
    - Data remanence and sanitization
      - Overwriting, degaussing, destruction
  - 2.4 Data Security Controls
    - Encryption
    - DLP (Data Loss Prevention)
    - DRM (Digital Rights Management)
    - CASB (Cloud Access Security Broker)
    - Tokenization
    - Masking and anonymization
  - 2.5 Data Roles and Responsibilities
    - Data controller (GDPR)
    - Data processor
    - Data subject
    - System owner vs data owner
  - 2.6 Data Privacy
    - Data minimization
    - Purpose limitation
    - Consent and notice
    - Privacy impact assessments
  - 2.7 Asset Handling
    - Labeling and marking
    - Storage and transport
    - Disposal and decommissioning

What does the nesting create?

Each indentation level becomes a child branch in the mindmap. Two spaces of indentation create one level of nesting. The colorFreezeLevel: 2 setting means the branch color stays consistent from level 2 downward, keeping each major section in the same hue.

  • Now expand Domains 3 through 8 with the same nested structure. Replace each domain's template content with its full subtopics. Here is Domain 3:
---
markmap:
  color:
    - "#7ed321"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 3: Security Architecture and Engineering (13%)**
  - 3.1 Secure Design Principles
    - Defense in depth
    - Least privilege
    - Separation of duties
    - Fail-safe defaults
    - Zero trust
    - Privacy by design
    - Secure defaults
  - 3.2 Security Models
    - Bell-LaPadula (confidentiality)
    - Biba (integrity)
    - Clark-Wilson
    - Brewer-Nash (Chinese Wall)
    - Information flow models
  - 3.3 Evaluation Criteria
    - Common Criteria (ISO 15408)
    - EAL levels (1-7)
    - Trusted Computing Base (TCB)
    - Security kernel
  - 3.4 System Security Architecture
    - Hardware security
      - TPM, HSM
    - Firmware security
    - Memory protection
    - Virtualization security
      - Hypervisor types
      - VM escape
  - 3.5 Cryptography
    - Symmetric (AES, 3DES)
    - Asymmetric (RSA, ECC)
    - Hashing (SHA-256, SHA-3)
    - Digital signatures
    - PKI and certificates
    - Key management lifecycle
    - Quantum considerations
      - Quantum key distribution
  - 3.6 Cryptanalysis
    - Brute force, birthday attacks
    - Known/chosen plaintext
    - Side-channel attacks
  - 3.7 Physical Security
    - Site planning and design
    - Wiring closets, server rooms
    - Environmental controls (HVAC, fire)
    - Access control (locks, biometrics)
    - Surveillance and monitoring
  - 3.8 Cloud Security
    - Cloud deployment models (IaaS, PaaS, SaaS)
    - Shared responsibility model
    - Cloud security controls
  - 3.9 Information System Lifecycle
    - Stakeholder requirements
    - Architectural design
    - Development/implementation
    - Verification and validation
    - Operations and maintenance
    - Retirement/disposal
  • Replace the Domain 4 template content with its full subtopics:
---
markmap:
  color:
    - "#4a90d9"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 4: Communication and Network Security (13%)**
  - 4.1 Network Architecture
    - OSI and TCP/IP models
    - Network topologies
    - Transport architecture
    - Unicast, broadcast, multicast, anycast
    - Performance metrics and traffic flows
  - 4.2 Secure Protocols
    - IPSec (AH, ESP)
    - SSH
    - TLS/SSL
    - DNSSEC
    - S/MIME
  - 4.3 Network Components
    - Routers, switches, gateways
    - Firewalls (stateful, next-gen)
    - IDS/IPS
    - Proxies and load balancers
    - WAF (Web Application Firewall)
  - 4.4 Segmentation
    - Physical segmentation
    - Logical segmentation (VLANs)
    - Micro-segmentation
      - VPNs, virtual routing
      - Virtual domains
    - Edge networks
    - DMZ architecture
  - 4.5 Wireless Security
    - WPA3, 802.11 standards
    - Bluetooth security
    - Wireless attacks and mitigations
  - 4.6 Remote Access
    - VPN types (site-to-site, remote access)
    - SASE (Secure Access Service Edge)
    - SD-WAN
    - Zero trust network access
  - 4.7 Secure Communication Channels
    - Voice (VoIP security)
    - Multimedia collaboration
    - Third-party connectivity
      - Telecom providers
      - Hardware support
  • Replace the Domain 5 template content with its full subtopics:
---
markmap:
  color:
    - "#9b59b6"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 5: Identity and Access Management (13%)**
  - 5.1 Identification and Authentication
    - Identity proofing
    - Authentication factors
      - Something you know
      - Something you have
      - Something you are
    - Multi-factor authentication (MFA)
    - Passwordless authentication
    - Biometrics
      - FRR, FAR, CER
  - 5.2 Access Control Models
    - DAC (Discretionary)
    - MAC (Mandatory)
    - RBAC (Role-Based)
    - ABAC (Attribute-Based)
    - Rule-based access control
  - 5.3 Identity Management Lifecycle
    - Provisioning
    - Account review and recertification
    - De-provisioning
    - Privilege creep
  - 5.4 Federation and SSO
    - SAML
    - OAuth 2.0
    - OpenID Connect
    - Kerberos
    - RADIUS and TACACS+
  - 5.5 Privileged Access Management (PAM)
    - Just-in-time access
    - Privileged session monitoring
    - Service accounts
    - Emergency/break-glass accounts
  - 5.6 Identity as a Service (IDaaS)
    - Cloud-based identity providers
    - Directory services
    - Credential management
  - 5.7 Access Control Attacks
    - Credential stuffing
    - Password spraying
    - Session hijacking
    - Privilege escalation
  • Replace the Domain 6 template content with its full subtopics:
---
markmap:
  color:
    - "#1abc9c"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 6: Security Assessment and Testing (12%)**
  - 6.1 Assessment Strategies
    - Internal assessments
    - External assessments
    - Third-party audits
    - Self-assessments
  - 6.2 Vulnerability Assessment
    - Network scanning
    - Application scanning
    - Configuration review
    - Authenticated vs unauthenticated scans
  - 6.3 Penetration Testing
    - Rules of engagement
    - Black box, white box, gray box
    - Social engineering tests
    - Physical penetration testing
    - Red team / blue team / purple team
  - 6.4 Security Control Testing
    - Static Application Security Testing (SAST)
    - Dynamic Application Security Testing (DAST)
    - Interactive Application Security Testing (IAST)
    - Software Composition Analysis (SCA)
    - Fuzz testing
    - Code review
  - 6.5 Log Review and Analysis
    - SIEM correlation
    - Log aggregation
    - Anomaly detection
    - Audit trails
  - 6.6 Security Metrics and KPIs
    - Mean time to detect (MTTD)
    - Mean time to respond (MTTR)
    - Patch compliance rate
    - Training completion rate
  - 6.7 Reporting and Remediation
    - Findings classification
    - Risk-based prioritization
    - Remediation tracking
    - Management reporting
  • Replace the Domain 7 template content with its full subtopics:
---
markmap:
  color:
    - "#e67e22"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 7: Security Operations (13%)**
  - 7.1 Investigations
    - Evidence types (real, documentary, testimonial)
    - Chain of custody
    - Digital forensics
      - Forensic imaging
      - Network forensics
      - Artifact analysis
    - eDiscovery
  - 7.2 Incident Response
    - IR lifecycle
      - Preparation
      - Detection and analysis
      - Containment
      - Eradication
      - Recovery
      - Lessons learned
    - CSIRT and SOC roles
    - Communication plans
  - 7.3 Logging and Monitoring
    - SIEM systems
    - Continuous monitoring
    - Threat intelligence feeds
    - User behavior analytics (UBA)
    - Detection and prevention tools
  - 7.4 Resource Protection
    - Media management
    - Hardware/software asset management
    - Configuration management
  - 7.5 Patch and Change Management
    - Patch prioritization
    - Change advisory board (CAB)
    - Change control process
    - Rollback procedures
  - 7.6 Recovery Strategies
    - Backup types (full, incremental, differential)
    - Recovery sites (hot, warm, cold)
    - RPO and RTO
    - DRP testing types
      - Tabletop, walkthrough
      - Simulation, parallel
      - Full interruption
  - 7.7 Business Continuity
    - BCP lifecycle
    - Crisis communication
    - Training and awareness
    - DR and BC exercises
  - 7.8 Physical Security Operations
    - Perimeter controls
    - Interior controls
    - Environmental safeguards
    - Personnel safety
  • Replace the Domain 8 template content with its full subtopics:
---
markmap:
  color:
    - "#3498db"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 8: Software Development Security (10%)**
  - 8.1 Secure SDLC
    - Development methodologies
      - Waterfall, Agile, Spiral
      - DevSecOps
      - Scaled Agile Framework (SAFe)
    - Maturity models (CMMI, SAMM)
    - Operation and maintenance
    - Change management
  - 8.2 Security Controls in Development
    - Security of development environments
    - Configuration management
    - Code repositories security
    - Build and deployment pipelines
    - Secrets management
    - API security
    - Application security testing
      - SAST, DAST, IAST
      - Software composition analysis
  - 8.3 Software Security Effectiveness
    - Auditing and logging
    - Risk analysis and mitigation
    - Security metrics
  - 8.4 Acquired Software Security
    - Commercial off-the-shelf (COTS)
    - Open source risks
    - Enterprise applications
    - Cloud services (SaaS, IaaS, PaaS)
    - Software supply chain
  - 8.5 Secure Coding
    - OWASP Top 10
    - Input validation
    - Output encoding
    - Error handling
    - Session management
    - Software-defined security
  - 8.6 Database Security
    - SQL injection prevention
    - Polyinstantiation
    - Aggregation and inference
    - Data warehousing and mining
  - 8.7 Threat Modeling
    - STRIDE
    - DREAD
    - Attack surface analysis
    - Abuse cases / misuse cases
  • Save cissp-mindmaps.html and refresh your browser.
  • Click through each of the 8 tabs. Each domain should now show a rich, multi-level mindmap with expandable branches colored in its unique hue.

Why unique colors per domain?

Each domain uses a distinct hue so you can tell at a glance which domain you're reviewing. The colorFreezeLevel: 2 setting keeps all branches within a domain in the same color family, preventing the default rainbow cycling that would make individual domains harder to distinguish.

Branches not expanding or showing raw text?

Check that each line of markdown uses exactly two spaces per indentation level. Tabs or inconsistent spacing will break the nesting hierarchy.

Also verify the YAML frontmatter is enclosed between --- delimiters with no extra whitespace before the first ---.

help me debug why my markmap branches aren't rendering correctly

Verify responsive behavior

The flexbox layout and absolute-positioned domain containers should adapt to any window size automatically. Time to confirm everything works together.

  • Resize your browser window wider and narrower. The mindmap should reflow within the container without any scroll bars appearing on the main page.
  • Check that the tab bar scrolls horizontally if the window is too narrow to show all 8 tabs at once.
  • Click nodes in a mindmap to collapse and expand branches. Use your scroll wheel to zoom in and out. Click and drag to pan around the diagram.

How does the layout stay responsive?

The body uses display: flex; flex-direction: column; height: 100vh to stack header, tabs, content, and footer vertically within the viewport. The .content area gets flex: 1 which means it absorbs all remaining space after the header, tab bar, and footer take their fixed heights.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file and all 8 tabs render their mindmaps with full branch detail.

ⓧ I'd like to double check the full code

Here is the complete cissp-mindmaps.html file at this point. Compare yours against it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CISSP 8-Domain Mindmap Reference</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkSansSerif, 'Segoe UI', Roboto, sans-serif;
      background: #1a1a2e;
      color: #e0e0e0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    header {
      padding: 16px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #e94560;
    }

    header .subtitle {
      font-size: 0.8rem;
      color: #888;
      margin-top: 2px;
    }

    .tab-bar {
      display: flex;
      gap: 4px;
      padding: 8px 24px;
      background: #16213e;
      border-bottom: 1px solid #0f3460;
      overflow-x: auto;
      flex-shrink: 0;
    }

    .tab {
      padding: 8px 14px;
      border: 1px solid #0f3460;
      border-radius: 6px 6px 0 0;
      background: #1a1a2e;
      color: #aaa;
      cursor: pointer;
      font-size: 0.78rem;
      white-space: nowrap;
      transition: all 0.2s;
      border-bottom: 2px solid transparent;
    }

    .tab:hover {
      background: #0f3460;
      color: #fff;
    }

    .tab.active {
      background: #0f3460;
      color: #fff;
      border-bottom: 2px solid #e94560;
    }

    .tab .weight {
      display: inline-block;
      margin-left: 6px;
      font-size: 0.7rem;
      color: #e94560;
      font-weight: 700;
    }

    .content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    .domain-container {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .domain-container.active {
      display: block;
    }

    .markmap {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .markmap > svg {
      width: 100%;
      height: 100%;
    }

    footer {
      padding: 8px 24px;
      background: #16213e;
      border-top: 1px solid #0f3460;
      font-size: 0.72rem;
      color: #666;
      display: flex;
      justify-content: space-between;
      flex-shrink: 0;
    }
  </style>
  <script>
    window.markmap = {
      autoLoader: {
        manual: true,
        toolbar: true
      }
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</head>
<body>
  <header>
    <div>
      <h1>CISSP 8-Domain Mindmap Reference</h1>
      <div class="subtitle">ISC2 Exam Outline - Effective April 15, 2024</div>
    </div>
  </header>

  <div class="tab-bar">
    <div class="tab active" data-domain="1">D1: Security &amp; Risk Mgmt<span class="weight">16%</span></div>
    <div class="tab" data-domain="2">D2: Asset Security<span class="weight">10%</span></div>
    <div class="tab" data-domain="3">D3: Security Arch &amp; Eng<span class="weight">13%</span></div>
    <div class="tab" data-domain="4">D4: Communication &amp; Network<span class="weight">13%</span></div>
    <div class="tab" data-domain="5">D5: IAM<span class="weight">13%</span></div>
    <div class="tab" data-domain="6">D6: Assessment &amp; Testing<span class="weight">12%</span></div>
    <div class="tab" data-domain="7">D7: Security Operations<span class="weight">13%</span></div>
    <div class="tab" data-domain="8">D8: Software Dev Security<span class="weight">10%</span></div>
  </div>

  <div class="content">
    <div class="domain-container active" id="domain-1">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#e94560"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 1: Security and Risk Management (16%)**
  - 1.1 Professional Ethics
    - ISC2 Code of Professional Ethics
    - Organizational code of ethics
  - 1.2 Security Concepts
    - Confidentiality
    - Integrity
    - Availability
    - Authenticity
    - Nonrepudiation
  - 1.3 Security Governance
    - Alignment with business strategy
    - Organizational roles and responsibilities
    - Security control frameworks
      - ISO 27001
      - NIST CSF
      - COBIT
      - SABSA
      - PCI DSS
      - FedRAMP
    - Due care and due diligence
  - 1.4 Legal, Regulatory, Compliance
    - Cybercrimes and data breaches
    - Licensing and IP
      - Patents, trademarks, copyrights
      - Trade secrets
    - Import/export controls
    - Transborder data flow
    - Privacy
      - GDPR
      - CCPA
      - PIPL
  - 1.5 Security Policies
    - Standards, procedures, guidelines
    - Baselines
  - 1.6 Business Continuity
    - BIA (Business Impact Analysis)
    - External dependencies
    - Assessment and implementation
  - 1.7 Personnel Security
    - Employment agreements
    - Onboarding and termination
    - Vendor/consultant controls
  - 1.8 Risk Management
    - Risk identification
    - Risk analysis (qualitative and quantitative)
    - Risk response/treatment
      - Avoid, mitigate, transfer, accept
    - Continuous monitoring and measurement
    - Risk frameworks (ISO 31000, NIST RMF)
    - Supply chain risk (SLAs, SBOM)
    - Reporting
  - 1.9 Threat Modeling
    - STRIDE
    - PASTA
    - Attack trees
  - 1.10 Security Awareness and Training
    - Social engineering awareness
    - Phishing campaigns
    - Security champions
    - Gamification
  - 1.11 Emerging Technologies
    - AI and machine learning
    - Blockchain
    - Cryptocurrency
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-2">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#f5a623"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 2: Asset Security (10%)**
  - 2.1 Asset Classification
    - Information classification levels
      - Public, Internal, Confidential, Restricted
    - Asset inventory and ownership
    - Data owner, steward, custodian
  - 2.2 Data States
    - Data at rest
      - Encryption, access controls
    - Data in transit
      - VPNs, TLS/SSL
    - Data in use
      - Memory protection, secure enclaves
  - 2.3 Data Lifecycle
    - Create, store, use, share, archive, destroy
    - Data retention policies
    - Data remanence and sanitization
      - Overwriting, degaussing, destruction
  - 2.4 Data Security Controls
    - Encryption
    - DLP (Data Loss Prevention)
    - DRM (Digital Rights Management)
    - CASB (Cloud Access Security Broker)
    - Tokenization
    - Masking and anonymization
  - 2.5 Data Roles and Responsibilities
    - Data controller (GDPR)
    - Data processor
    - Data subject
    - System owner vs data owner
  - 2.6 Data Privacy
    - Data minimization
    - Purpose limitation
    - Consent and notice
    - Privacy impact assessments
  - 2.7 Asset Handling
    - Labeling and marking
    - Storage and transport
    - Disposal and decommissioning
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-3">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#7ed321"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 3: Security Architecture and Engineering (13%)**
  - 3.1 Secure Design Principles
    - Defense in depth
    - Least privilege
    - Separation of duties
    - Fail-safe defaults
    - Zero trust
    - Privacy by design
    - Secure defaults
  - 3.2 Security Models
    - Bell-LaPadula (confidentiality)
    - Biba (integrity)
    - Clark-Wilson
    - Brewer-Nash (Chinese Wall)
    - Information flow models
  - 3.3 Evaluation Criteria
    - Common Criteria (ISO 15408)
    - EAL levels (1-7)
    - Trusted Computing Base (TCB)
    - Security kernel
  - 3.4 System Security Architecture
    - Hardware security
      - TPM, HSM
    - Firmware security
    - Memory protection
    - Virtualization security
      - Hypervisor types
      - VM escape
  - 3.5 Cryptography
    - Symmetric (AES, 3DES)
    - Asymmetric (RSA, ECC)
    - Hashing (SHA-256, SHA-3)
    - Digital signatures
    - PKI and certificates
    - Key management lifecycle
    - Quantum considerations
      - Quantum key distribution
  - 3.6 Cryptanalysis
    - Brute force, birthday attacks
    - Known/chosen plaintext
    - Side-channel attacks
  - 3.7 Physical Security
    - Site planning and design
    - Wiring closets, server rooms
    - Environmental controls (HVAC, fire)
    - Access control (locks, biometrics)
    - Surveillance and monitoring
  - 3.8 Cloud Security
    - Cloud deployment models (IaaS, PaaS, SaaS)
    - Shared responsibility model
    - Cloud security controls
  - 3.9 Information System Lifecycle
    - Stakeholder requirements
    - Architectural design
    - Development/implementation
    - Verification and validation
    - Operations and maintenance
    - Retirement/disposal
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-4">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#4a90d9"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 4: Communication and Network Security (13%)**
  - 4.1 Network Architecture
    - OSI and TCP/IP models
    - Network topologies
    - Transport architecture
    - Unicast, broadcast, multicast, anycast
    - Performance metrics and traffic flows
  - 4.2 Secure Protocols
    - IPSec (AH, ESP)
    - SSH
    - TLS/SSL
    - DNSSEC
    - S/MIME
  - 4.3 Network Components
    - Routers, switches, gateways
    - Firewalls (stateful, next-gen)
    - IDS/IPS
    - Proxies and load balancers
    - WAF (Web Application Firewall)
  - 4.4 Segmentation
    - Physical segmentation
    - Logical segmentation (VLANs)
    - Micro-segmentation
      - VPNs, virtual routing
      - Virtual domains
    - Edge networks
    - DMZ architecture
  - 4.5 Wireless Security
    - WPA3, 802.11 standards
    - Bluetooth security
    - Wireless attacks and mitigations
  - 4.6 Remote Access
    - VPN types (site-to-site, remote access)
    - SASE (Secure Access Service Edge)
    - SD-WAN
    - Zero trust network access
  - 4.7 Secure Communication Channels
    - Voice (VoIP security)
    - Multimedia collaboration
    - Third-party connectivity
      - Telecom providers
      - Hardware support
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-5">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#9b59b6"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 5: Identity and Access Management (13%)**
  - 5.1 Identification and Authentication
    - Identity proofing
    - Authentication factors
      - Something you know
      - Something you have
      - Something you are
    - Multi-factor authentication (MFA)
    - Passwordless authentication
    - Biometrics
      - FRR, FAR, CER
  - 5.2 Access Control Models
    - DAC (Discretionary)
    - MAC (Mandatory)
    - RBAC (Role-Based)
    - ABAC (Attribute-Based)
    - Rule-based access control
  - 5.3 Identity Management Lifecycle
    - Provisioning
    - Account review and recertification
    - De-provisioning
    - Privilege creep
  - 5.4 Federation and SSO
    - SAML
    - OAuth 2.0
    - OpenID Connect
    - Kerberos
    - RADIUS and TACACS+
  - 5.5 Privileged Access Management (PAM)
    - Just-in-time access
    - Privileged session monitoring
    - Service accounts
    - Emergency/break-glass accounts
  - 5.6 Identity as a Service (IDaaS)
    - Cloud-based identity providers
    - Directory services
    - Credential management
  - 5.7 Access Control Attacks
    - Credential stuffing
    - Password spraying
    - Session hijacking
    - Privilege escalation
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-6">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#1abc9c"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 6: Security Assessment and Testing (12%)**
  - 6.1 Assessment Strategies
    - Internal assessments
    - External assessments
    - Third-party audits
    - Self-assessments
  - 6.2 Vulnerability Assessment
    - Network scanning
    - Application scanning
    - Configuration review
    - Authenticated vs unauthenticated scans
  - 6.3 Penetration Testing
    - Rules of engagement
    - Black box, white box, gray box
    - Social engineering tests
    - Physical penetration testing
    - Red team / blue team / purple team
  - 6.4 Security Control Testing
    - Static Application Security Testing (SAST)
    - Dynamic Application Security Testing (DAST)
    - Interactive Application Security Testing (IAST)
    - Software Composition Analysis (SCA)
    - Fuzz testing
    - Code review
  - 6.5 Log Review and Analysis
    - SIEM correlation
    - Log aggregation
    - Anomaly detection
    - Audit trails
  - 6.6 Security Metrics and KPIs
    - Mean time to detect (MTTD)
    - Mean time to respond (MTTR)
    - Patch compliance rate
    - Training completion rate
  - 6.7 Reporting and Remediation
    - Findings classification
    - Risk-based prioritization
    - Remediation tracking
    - Management reporting
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-7">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#e67e22"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 7: Security Operations (13%)**
  - 7.1 Investigations
    - Evidence types (real, documentary, testimonial)
    - Chain of custody
    - Digital forensics
      - Forensic imaging
      - Network forensics
      - Artifact analysis
    - eDiscovery
  - 7.2 Incident Response
    - IR lifecycle
      - Preparation
      - Detection and analysis
      - Containment
      - Eradication
      - Recovery
      - Lessons learned
    - CSIRT and SOC roles
    - Communication plans
  - 7.3 Logging and Monitoring
    - SIEM systems
    - Continuous monitoring
    - Threat intelligence feeds
    - User behavior analytics (UBA)
    - Detection and prevention tools
  - 7.4 Resource Protection
    - Media management
    - Hardware/software asset management
    - Configuration management
  - 7.5 Patch and Change Management
    - Patch prioritization
    - Change advisory board (CAB)
    - Change control process
    - Rollback procedures
  - 7.6 Recovery Strategies
    - Backup types (full, incremental, differential)
    - Recovery sites (hot, warm, cold)
    - RPO and RTO
    - DRP testing types
      - Tabletop, walkthrough
      - Simulation, parallel
      - Full interruption
  - 7.7 Business Continuity
    - BCP lifecycle
    - Crisis communication
    - Training and awareness
    - DR and BC exercises
  - 7.8 Physical Security Operations
    - Perimeter controls
    - Interior controls
    - Environmental safeguards
    - Personnel safety
        </script>
      </div>
    </div>
    <div class="domain-container" id="domain-8">
      <div class="markmap">
        <script type="text/template">
---
markmap:
  color:
    - "#3498db"
  colorFreezeLevel: 2
  initialExpandLevel: 2
---
- **Domain 8: Software Development Security (10%)**
  - 8.1 Secure SDLC
    - Development methodologies
      - Waterfall, Agile, Spiral
      - DevSecOps
      - Scaled Agile Framework (SAFe)
    - Maturity models (CMMI, SAMM)
    - Operation and maintenance
    - Change management
  - 8.2 Security Controls in Development
    - Security of development environments
    - Configuration management
    - Code repositories security
    - Build and deployment pipelines
    - Secrets management
    - API security
    - Application security testing
      - SAST, DAST, IAST
      - Software composition analysis
  - 8.3 Software Security Effectiveness
    - Auditing and logging
    - Risk analysis and mitigation
    - Security metrics
  - 8.4 Acquired Software Security
    - Commercial off-the-shelf (COTS)
    - Open source risks
    - Enterprise applications
    - Cloud services (SaaS, IaaS, PaaS)
    - Software supply chain
  - 8.5 Secure Coding
    - OWASP Top 10
    - Input validation
    - Output encoding
    - Error handling
    - Session management
    - Software-defined security
  - 8.6 Database Security
    - SQL injection prevention
    - Polyinstantiation
    - Aggregation and inference
    - Data warehousing and mining
  - 8.7 Threat Modeling
    - STRIDE
    - DREAD
    - Attack surface analysis
    - Abuse cases / misuse cases
        </script>
      </div>
    </div>
  </div>

  <footer>
    <span>Based on ISC2 CISSP Exam Outline - Effective April 15, 2024</span>
    <span>Scroll to zoom | Drag to pan | Click nodes to expand/collapse</span>
  </footer>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabs = document.querySelectorAll('.tab');
      const containers = document.querySelectorAll('.domain-container');
      const rendered = new Set();

      function switchDomain(domainNum) {
        tabs.forEach(t => t.classList.remove('active'));
        containers.forEach(c => c.classList.remove('active'));
        const activeTab = document.querySelector(`.tab[data-domain="${domainNum}"]`);
        const activeContainer = document.getElementById(`domain-${domainNum}`);
        activeTab.classList.add('active');
        activeContainer.classList.add('active');
        if (!rendered.has(domainNum)) {
          markmap.autoLoader.renderAllUnder(activeContainer).then(() => { rendered.add(domainNum); });
        }
      }

      tabs.forEach(tab => {
        tab.addEventListener('click', () => { switchDomain(tab.getAttribute('data-domain')); });
      });

      markmap.autoLoader.ready.then(() => { switchDomain('1'); });
    });
  </script>
</body>
</html>

Your CISSP mindmap reference is complete. You now have a portable, interactive study tool with 8 color-coded domains, full subtopic branches, and a polished dark interface you can open in any browser.

Secret mission

Add Cross-Domain Search

Your mindmap reference covers hundreds of CISSP topics spread across 8 domains. What if you could instantly find any topic without clicking through every tab? In this secret mission, you'll add a search bar that scans all domains at once, highlights matches, and navigates you straight to the right domain.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely locally, so there are no ongoing costs or cloud resources to worry about.

Resources you used:

  • One local HTML file: cissp-mindmaps.html

Keep everything running

No action needed. Choose this if you want to keep your CISSP mindmap reference available for study sessions.

  • Your cissp-mindmaps.html file lives on your computer. Open it anytime in a browser to review.
  • You can share the file with colleagues studying for CISSP. It works standalone after the initial CDN load.
  • Add more detail to any domain's branches as you continue reviewing.

Pause - I'll come back to this later

Since this is a single local file with no running processes, there is nothing to pause. The file stays on your computer until you decide to delete it.

  • Close the browser tab showing the mindmap.
  • Close Google Antigravity IDE if you are done for now.
  • When you want to return, just open cissp-mindmaps.html in your browser again.

Delete - I don't want to use this again

Remove the project file entirely from your computer.

  • On macOS or Linux, open a terminal, navigate to the folder containing your file, and run:
rm cissp-mindmaps.html
  • On Windows, open a terminal, navigate to the folder containing your file, and run:
del cissp-mindmaps.html
  • Alternatively, locate cissp-mindmaps.html in Finder (macOS) or File Explorer (Windows) and move it to the Trash or Recycle Bin.

Nice Work!

Nice Work!

Nice work! You just built a fully interactive CISSP 8-domain mindmap reference in a single HTML file that you can open anytime to review how security concepts connect across the entire certification body of knowledge.

You've learned how to:

  • Build an interactive data visualization tool using the Markmap library via CDN to render nested Markdown as zoomable, pannable mindmaps.
  • Create a tabbed single-page application with JavaScript-driven navigation covering all 8 CISSP domains aligned to the ISC2 April 2024 exam outline.
  • Apply a polished dark theme with domain-specific color coding using Markmap's YAML frontmatter options for color and colorFreezeLevel.
  • Secret Mission: Added a cross-domain keyword search feature with debounced input, highlighted results grouped by domain, and keyboard shortcut navigation.

Ready to quiz yourself?