User
Design a comprehensive CRM architecture diagram and an ER diagram without tabs
Shared Chat
CRM Architecture and ER Diagram Design Plan
3/25/2025, 2:41:35 AM
GizAI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRM System Architecture & ER Diagram</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<style>
:root {
--primary: #2563eb;
--secondary: #475569;
--light: #f8fafc;
--dark: #1e293b;
--accent: #7c3aed;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: var(--light);
color: var(--dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: white;
padding: 20px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-bottom: 30px;
}
h1 {
color: var(--primary);
font-size: 2.5rem;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
h2 {
color: var(--secondary);
font-size: 1.8rem;
margin-top: 40px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 25px;
margin-bottom: 30px;
}
.diagram-container {
overflow: auto;
margin-top: 20px;
background: white;
padding: 20px;
border-radius: 8px;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.color-box {
width: 20px;
height: 20px;
border-radius: 4px;
}
footer {
text-align: center;
margin-top: 50px;
color: var(--secondary);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
padding: 15px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="mdi mdi-chart-bubble"></i> CRM System Architecture & ER Diagram</h1>
</header>
<div class="card">
<h2><i class="mdi mdi-sitemap"></i> CRM System Architecture</h2>
<p>This diagram illustrates the comprehensive architecture of a modern Customer Relationship Management (CRM) system, showcasing the various components, their interactions, and data flow.</p>
<div class="diagram-container">
<div class="mermaid">
graph TB
subgraph "Client Layer"
A[Web Application]
B[Mobile App]
C[Third-Party Integration]
end
subgraph "API Gateway Layer"
D[API Gateway]
D1[Authentication & Authorization]
D2[Rate Limiting]
D3[Request Routing]
end
subgraph "Business Logic Layer"
E[Customer Service]
F[Sales Service]
G[Marketing Service]
H[Analytics Service]
I[Reporting Service]
end
subgraph "Integration Layer"
J[Email Service]
K[Payment Gateway]
L[External APIs]
M[Notification Service]
end
subgraph "Data Layer"
N[(Main Database)]
O[(Analytics Database)]
P[Cache]
Q[Message Queue]
end
subgraph "Infrastructure Layer"
R[Load Balancer]
S[Containerization]
T[Monitoring & Logging]
U[Backup & Disaster Recovery]
end
A --> D
B --> D
C --> D
D --> D1
D --> D2
D --> D3
D --> E
D --> F
D --> G
D --> H
D --> I
E --> N
F --> N
G --> N
H --> O
I --> N
E --> J
F --> K
G --> L
H --> Q
I --> M
E -.-> P
F -.-> P
G -.-> P
R --> D
S -.-> E
S -.-> F
S -.-> G
S -.-> H
S -.-> I
T -.-> S
U -.-> N
U -.-> O
class A,B,C clientNode
class D,D1,D2,D3 apiNode
class E,F,G,H,I businessNode
class J,K,L,M integrationNode
class N,O,P,Q dataNode
class R,S,T,U infraNode
</div>
</div>
<div class="legend">
<div class="legend-item">
<div class="color-box" style="background-color: #FFCDD2;"></div>
<span>Client Layer</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #BBDEFB;"></div>
<span>API Gateway Layer</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #C8E6C9;"></div>
<span>Business Logic Layer</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #FFE0B2;"></div>
<span>Integration Layer</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #E1BEE7;"></div>
<span>Data Layer</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #B2DFDB;"></div>
<span>Infrastructure Layer</span>
</div>
</div>
</div>
<div class="card">
<h2><i class="mdi mdi-database-outline"></i> CRM Entity-Relationship Diagram</h2>
<p>The following ER diagram shows the database schema design for the CRM system, illustrating entities, their attributes, and relationships.</p>
<div class="diagram-container">
<div class="mermaid">
erDiagram
CUSTOMER {
int customer_id PK
string first_name
string last_name
string email
string phone
date created_at
date last_updated
string status
int account_manager_id FK
}
ACCOUNT {
int account_id PK
string name
string industry
string website
string address
string type
date created_at
int owner_id FK
}
CONTACT {
int contact_id PK
string first_name
string last_name
string email
string phone
string job_title
int account_id FK
date created_at
}
OPPORTUNITY {
int opportunity_id PK
string name
float amount
string stage
float probability
date close_date
date created_at
int account_id FK
int owner_id FK
}
PRODUCT {
int product_id PK
string name
string description
float price
string category
bool active
}
DEAL {
int deal_id PK
int opportunity_id FK
int product_id FK
int quantity
float unit_price
float total_price
}
ACTIVITY {
int activity_id PK
string type
string description
date scheduled_at
date completed_at
int customer_id FK
int contact_id FK
int account_id FK
int opportunity_id FK
int owner_id FK
}
USER {
int user_id PK
string first_name
string last_name
string email
string role
date created_at
bool active
}
CAMPAIGN {
int campaign_id PK
string name
string type
string status
date start_date
date end_date
float budget
float actual_cost
int owner_id FK
}
CAMPAIGN_MEMBER {
int campaign_member_id PK
int campaign_id FK
int contact_id FK
string status
date created_at
}
CUSTOMER ||--o{ ACTIVITY : participates
CUSTOMER ||--o{ OPPORTUNITY : has
CUSTOMER }|--|| USER : managed_by
ACCOUNT ||--o{ CONTACT : has
ACCOUNT ||--o{ OPPORTUNITY : has
ACCOUNT }|--|| USER : owned_by
CONTACT ||--o{ ACTIVITY : participates
CONTACT ||--o{ CAMPAIGN_MEMBER : belongs
OPPORTUNITY ||--o{ DEAL : contains
OPPORTUNITY ||--o{ ACTIVITY : has
OPPORTUNITY }|--|| USER : owned_by
PRODUCT ||--o{ DEAL : included_in
USER ||--o{ ACTIVITY : owns
USER ||--o{ CAMPAIGN : manages
CAMPAIGN ||--o{ CAMPAIGN_MEMBER : includes
</div>
</div>
</div>
</div>
<footer>
<p>© 2025 CRM System Architecture & Design | Created with Mermaid.js</p>
</footer>
<script>
// Initialize Mermaid with custom theme
mermaid.initialize({
startOnLoad: true,
theme: 'default',
securityLevel: 'loose',
themeVariables: {
primaryColor: '#2563eb',
primaryTextColor: '#ffffff',
primaryBorderColor: '#1e40af',
lineColor: '#64748b',
secondaryColor: '#475569',
tertiaryColor: '#f8fafc'
},
flowchart: {
nodeSpacing: 30,
rankSpacing: 80,
curve: 'basis'
},
er: {
entityPadding: 15,
fontSize: 14
},
htmlLabels: true
});
// Add custom styles after Mermaid renders
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// Apply custom styles to client layer nodes
document.querySelectorAll('.clientNode rect, .clientNode circle, .clientNode polygon, .clientNode path')
.forEach(el => el.style.fill = '#FFCDD2');
// Apply custom styles to API gateway layer nodes
document.querySelectorAll('.apiNode rect, .apiNode circle, .apiNode polygon, .apiNode path')
.forEach(el => el.style.fill = '#BBDEFB');
// Apply custom styles to business layer nodes
document.querySelectorAll('.businessNode rect, .businessNode circle, .businessNode polygon, .businessNode path')
.forEach(el => el.style.fill = '#C8E6C9');
// Apply custom styles to integration layer nodes
document.querySelectorAll('.integrationNode rect, .integrationNode circle, .integrationNode polygon, .integrationNode path')
.forEach(el => el.style.fill = '#FFE0B2');
// Apply custom styles to data layer nodes
document.querySelectorAll('.dataNode rect, .dataNode circle, .dataNode polygon, .dataNode path')
.forEach(el => el.style.fill = '#E1BEE7');
// Apply custom styles to infrastructure layer nodes
document.querySelectorAll('.infraNode rect, .infraNode circle, .infraNode polygon, .infraNode path')
.forEach(el => el.style.fill = '#B2DFDB');
}, 1000);
});
</script>
</body>
</html>