Systems Thinking Framework

⚡ Быстрый старт

Вариант 1 — Интерактивное демо

Используйте встроенный 5-фазный инструмент диагностики прямо в боте. Запустите @sysmindlab_bot и начните анализировать проблему немедленно.

Вариант 2 — Standalone React App

# Создать проект
npx create-react-app systems-thinking
cd systems-thinking

# Установить зависимости
npm install zustand recharts react-flow-renderer axios

# Скопировать компоненты
cp SystemsThinkingApp.jsx src/
cp CausalLoopCanvas.jsx src/

# Запустить
npm start
    bash

Откройте http://localhost:3000 и начните анализ.

🏗 Архитектура

🖥 Frontend Setup (Next.js)

# Создать проект
npx create-next-app@latest systems-thinking --typescript

# Установить UI-библиотеки
npm install @headlessui/react @heroicons/react zustand recharts
    bash

Структура проекта

systems-thinking/
├── app/
│   ├── page.tsx                    — главная
│   ├── analysis/
│   │   ├── [id]/page.tsx           — детали анализа
│   │   └── new/page.tsx            — новый анализ
│   └── templates/
│       └── page.tsx                — библиотека архетипов
├── components/
│   ├── ProblemForm.tsx
│   ├── CausalLoopEditor.tsx
│   ├── ArchetypeSelector.tsx
│   ├── LeveragePointGrid.tsx
│   └── ReportGenerator.tsx
├── lib/
│   ├── store.ts                    — Zustand
│   ├── api.ts
│   └── types.ts
└── styles/
    └── globals.css
    text

⚙️ Backend Setup (Node.js + Express)

// server.js
const express = require('express');
const cors = require('cors');
const Anthropic = require('@anthropic-ai/sdk');
const db = require('./db');

const app = express();
const client = new Anthropic();

// Роут: анализ системы
app.post('/api/analyze', async (req, res) => {
  const { problem, timeline, stakeholders } = req.body;

  // Claude определяет архетип
  const message = await client.messages.create({
    model: 'claude-opus-4-6',
    max_tokens: 1024,
    messages: [{
      role: 'user',
      content: `Based on this description, identify the system archetype:
        Problem: ${problem}
        Timeline: ${timeline}
        Stakeholders: ${stakeholders}

        Choose from: Fixes That Fail, Limits to Growth, Shifting the Burden,
        Success to Successful, Escalation, Eroding Goals, Accidental Adversaries,
        Drifting Goals, Tragedy of the Commons`
    }]
  });

  // Сохранить в БД
  const analysis = await db.analyses.create({
    userId: req.user.id,
    problem, timeline, stakeholders,
    detectedArchetype: message.content[0].text
  });

  res.json(analysis);
});

app.listen(3001, () => console.log('Server running on :3001'));
    javascript

🗄 База данных (PostgreSQL)

-- Пользователи
CREATE TABLE users (
  id         SERIAL PRIMARY KEY,
  email      VARCHAR(255) UNIQUE NOT NULL,
  name       VARCHAR(255),
  created_at TIMESTAMP DEFAULT NOW()
);

-- Анализы
CREATE TABLE analyses (
  id                 SERIAL PRIMARY KEY,
  user_id            INTEGER REFERENCES users(id),
  title              VARCHAR(255),
  problem            TEXT,
  timeline           TEXT,
  stakeholders       TEXT,
  detected_archetype VARCHAR(100),
  leverage_points    JSONB,
  status             VARCHAR(50),     -- draft | in-progress | completed
  created_at         TIMESTAMP DEFAULT NOW(),
  updated_at         TIMESTAMP DEFAULT NOW()
);

-- Причинно-следственные диаграммы
CREATE TABLE causal_loops (
  id          SERIAL PRIMARY KEY,
  analysis_id INTEGER REFERENCES analyses(id),
  nodes       JSONB,  -- {id, label, type, x, y}
  edges       JSONB,  -- {from, to, type, label}
  created_at  TIMESTAMP DEFAULT NOW()
);

-- Отчёты
CREATE TABLE reports (
  id           SERIAL PRIMARY KEY,
  analysis_id  INTEGER REFERENCES analyses(id),
  format       VARCHAR(50),   -- pdf | json | markdown
  content      TEXT,
  generated_at TIMESTAMP DEFAULT NOW()
);
    sql

📅 Фазы разработки

🚀 Деплой

npm i -g vercel
vercel
vercel env add ANTHROPIC_API_KEY
vercel env add DATABASE_URL
        

npm run build
aws s3 sync out/ s3://my-bucket
        

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3001
CMD ["node", "server.js"]
        

🔗 Интеграции

Slack Bot

app.message(/analyze system/, async ({ message, say }) => {
  say('Starting systems analysis...');
  // Открыть модальное окно с формой анализа
});
    javascript

Figma Plugin

// Встроить CLD-диаграмму как Figma-компонент
figma.ui.onmessage = msg => {
  if (msg.type === 'create-diagram') {
    createCausalLoopFrame(msg.data);
  }
};
    javascript

Jira Integration

POST /api/jira/link
{
  "analysisId": "123",
  "jiraKey": "PROJ-456"
}
    json

🧪 Тестирование

Unit-тесты

// tests/archetypeDetector.test.js
test('detects Fixes That Fail pattern', () => {
  const input = 'quick fix → temporary relief → problem returns worse';
  expect(detectArchetype(input)).toBe('fixes-that-fail');
});
    javascript

E2E-тесты (Playwright)

// tests/analysis.e2e.js
test('user can complete full analysis', async () => {
  await page.goto('/analysis/new');
  await page.fill('[name=problem]', 'Customer churn increasing');
  await page.click('button:has-text("Continue")');
  await expect(page).toHaveURL(/\/analysis\/\d+\/results/);
});
    javascript

Нагрузочное тестирование

# k6: симуляция 1000 пользователей
k6 run load-test.js
    bash

🔒 Безопасность

• HTTPS включён
• CORS правильно настроен
• Защита от SQL-инъекций (параметризованные запросы)
• XSS-защита (санитизация ввода)
• CSRF-токены на формах
• Rate limiting на API
• Аутентификация пользователей (OAuth/JWT)
• Шифрование данных в покое
• Регулярные аудиты безопасности
• GDPR-соответствие

📚 Ресурсы