LikeC4: Bridging Structure and Code for Humans & AI

How To
1

LikeC4 for Cursor

Diagrams bridge abstract structure and concrete code, enabling humans to visualize complexity while providing LLMs structured data for analysis. LikeC4 surpasses UML (overly technical), Mermaid (limited semantics), C4 (rigid hierarchy), and D2 (ambiguous syntax) with balanced readability/machine-parsability through contextual auto-layouts, semantic relationships, and AI-optimized schema inheritance.

LikeC4 Viewer for VSCode(available in Cursor)

Prompt example adding to context: elements.likec4, colors.likec4 and relationships.likec4:

Lets create a LikeC4 diagram strictly following likec4-codestyle for code validation and examples in likec4-reference as reference when needed, we want to use our existing elements, colors and relationships or create new ones if needed, diagram should have a central point with expanding relationships like a mind map to help understand this concept: AR-software for sunglasses that undress or dress choosen subjects

Result:

specification {
  // Custom colors for AR system
  color neon-pink #ff00ff
  color electric-blue #00ffff
  color retro-black #0d0d15

  // Tags for system components
  tag ar-core
  tag ml
  tag ui
  tag vision
  tag clothing
  tag privacy-control

  // Element types
  element ar-system
  element vision-processor
  element ml-model
  element ui-component
  element security-module
  element data-store
}

model {
  ARDressCore = ar-system 'AR Dress/Undress Core' {
    #ar-core
    description "Central AR system for virtual clothing manipulation"
    technology "Unity AR, CoreML"
    style {
      shape cylinder
      color electric-blue
    }
  }

  // Vision Processing Branch
  VisionEngine = vision-processor 'Computer Vision Engine' {
    #vision
    description "Processes real-time camera feed for body detection"
    technology "OpenCV, ARKit"
    style {
      shape rectangle
      color primary
    }
  }

  BodyTracker = vision-processor 'Body Tracking System' {
    #vision
    description "Real-time body pose estimation and tracking"
    technology "MediaPipe, TensorFlow"
    style {
      shape rectangle
      color secondary
    }
  }

  // ML Models Branch
  ClothingAI = ml-model 'Clothing AI Model' {
    #ml #clothing
    description "AI model for clothing generation and manipulation"
    technology "StyleGAN3, PyTorch"
    style {
      shape rectangle
      color neon-pink
    }
  }

  TextureGen = ml-model 'Texture Generator' {
    #ml
    description "Generates and maps textures to 3D models"
    technology "Neural Rendering"
    style {
      shape rectangle
      color amber
    }
  }

  // UI Components Branch
  ARInterface = ui-component 'AR Interface' {
    #ui
    description "Main AR user interface and controls"
    technology "SwiftUI, ARKit"
    style {
      shape browser
      color green
    }
  }

  GestureControl = ui-component 'Gesture Controls' {
    #ui
    description "Hand gesture recognition for AR interaction"
    technology "MediaPipe Hands"
    style {
      shape mobile
      color indigo
    }
  }

  // Security Branch
  PrivacyGuard = security-module 'Privacy Protection' {
    #privacy-control
    description "Ensures user privacy and content filtering"
    technology "On-device ML, CoreML"
    style {
      shape rectangle
      color red
    }
  }

  ContentFilter = security-module 'Content Filter' {
    #privacy-control
    description "Real-time content moderation and filtering"
    technology "TensorFlow Lite"
    style {
      shape rectangle
      color slate
    }
  }

  // Relationships
  ARDressCore -> VisionEngine "Processes video feed" {
    technology "Camera API"
  }
  
  VisionEngine -> BodyTracker "Tracks body" {
    #vision
    technology "Pose Estimation"
  }

  ARDressCore -> ClothingAI "Generates clothing" {
    #ml
    technology "Neural Networks"
  }

  ClothingAI -> TextureGen "Creates textures" {
    technology "GAN Pipeline"
  }

  ARDressCore -> ARInterface "Displays AR" {
    #ui
    technology "OpenGL ES"
  }

  ARInterface -> GestureControl "Controls AR" {
    technology "Gesture Recognition"
  }

  ARDressCore -> PrivacyGuard "Enforces privacy" {
    technology "Privacy API"
  }

  PrivacyGuard -> ContentFilter "Moderates content" {
    technology "ML Filter"
  }
}

views {
  view ar_system_overview of ARDressCore {
    title "AR Dress System Overview"
    include *
    
    style element.tag = #ar-core {
      color electric-blue
    }
    
    autoLayout TopBottom 150 120
  }

  view vision of VisionEngine {
    title "Vision Processing Pipeline"
    include VisionEngine, BodyTracker
    
    style element.tag = #vision {
      color primary
    }
    
    autoLayout LeftRight 120 100
  }

  view ml of ClothingAI {
    title "ML Model Pipeline"
    include ClothingAI, TextureGen
    
    style element.tag = #ml {
      color neon-pink
    }
    
    autoLayout TopBottom 120 100
  }

  view security of PrivacyGuard {
    title "Security and Privacy"
    include PrivacyGuard, ContentFilter
    
    style element.tag = #privacy-control {
      color red
    }
    
    autoLayout LeftRight 120 100
  }
}

One-shot in agent mode with Claude after 4 lint errors(duplicate tags), requires around 4-6 iterations with Deepseek R1 in normal mode, in case you need to debug further, add LikeC4 Documentation and tag @likec4 asking to look into.
Currently LikeC4 vscode extension shares all files elements with each other and is subject to change.

image
image1503×849 154 KB

Code was exceeding forum limits, uploaded to rentry and will upload to github if requested:
2 mdc files + 3 base files

On a side note, I’m trying to change the default font from vscode preview window which is an iframe with a webview, I got Custom UI Style ext but no luck…